前端通過url下載文件方法

前端通過url下載文件方法

產生背景

• 瀏覽器通過url下載文件，當瀏覽器識別出資深能播放的資源文件，就不會走下載流程，會直接打開
• 解決方法
• 1.讓后台轉成請求的方式，輸出文件流（如果想實現批量下載-因為瀏覽器會誤判多文件下載是個攻擊，可新建iframe通過src實現批量下載）
• 2.a標簽， h5的download，僅僅限制當前域名下的文件下載，不同域名之下的，不會走下載，會直接打開瀏覽器能自動識別的資源文件
• 3.通過下面前端看似狗屎的代碼解決

// 保存到本地並自動點擊
function saveAs(data, name) {
    const urlObject = window.URL || window.webkitURL || window;
    const export_blob = new Blob([data]);
    const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = urlObject.createObjectURL(export_blob);
    save_link.download = name;
    save_link.click();
}
// 下載含有url的文件
function downloadUrlFile(url, fileName) {
    const url2 = url.replace(/\\/g, '/');
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url2, true);
    xhr.responseType = 'blob';
    //xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
    // 為了避免大文件影響用戶體驗，建議加loading
    xhr.onload = () => {
        if (xhr.status === 200) {
            // 獲取文件blob數據並保存
            saveAs(xhr.response, fileName);
        }
    };
    xhr.send();
}
downloadUrlFile(url, fileName);