檔案下載有多種方式，連結跳轉方式下載，開啟新頁面下載，ajax下載檔案。

以前ajax是不能下載檔案的，現在的xhr2版本支援blob，可以將檔案下載到記憶體中，然後彈出儲存框，儲存到本地。

這樣不能下載太大的檔案，記憶體會被撐爆。新的fetch Api也可以下載檔案。

示例如下：

1. 跳轉下載

function location_download(){
     location.href = '/file/build';
}

2. 超連結下載(可自由調整為本頁下載或新開頁面下載)

<a class="btn" download="data.zip" target="_blank"
 
 href="/file/build">
   超連結直接下載
</a>

3. 模擬超連結下載

function simulateA_download() {
    var a = document.createElement('a');
    a.href = '/file/build';
    //檔名無效
    a.download = 'data.zip';
    document.body.appendChild(a);
    a.click()
    document.body.removeChild(a);
}

4. 原生xhr下載

function ajax_download(){
    
 
var url = '/file/build';
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);    // 也可以使用POST方式，根據介面
    xhr.responseType = "blob";  // 返回型別blob
    // 定義請求完成的處理函式，請求前也可以增加載入框/禁用下載按鈕邏輯
    xhr.onload = function () {
        // 請求完成
        if (this.status === 200) {
            // 返回200
            var
 
 blob = this.response;
            var reader = new FileReader();
            reader.readAsDataURL(blob);  // 轉換為base64，可以直接放入a表情href
            reader.onload = function (e) {
                // 轉換完成，建立一個a標籤用於下載
                var a = document.createElement('a');
                //檔名有效
                a.download = 'data.zip';
                //會造成跳轉到空白頁，解決方案？？？
                a.href = e.target.result;
                a.target = '_self';
                document.querySelector("body").appendChild(a);  // 修復firefox中無法觸發click
                a.click();
                a.parentNode.remove();
            }
        }
    };
    // 傳送ajax請求
    xhr.send()
}

5. axios下載

function axios_download(){
    let url = '/file/build';
    let fileName = 'data_axios.zip';
    let type = fileName;

    return axios({
        method: 'get',
        url: url,
        responseType: 'blob',
        headers: {
            'content-disposition': `attachment;filename=${type}`,
            'content-type': 'application/x-download;charset=utf-8'
        }
    })
    .then(res => {
        const blob = new Blob([res.data], {type: type})
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        //檔名有效
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    })
}

6. superagent下載

function superagent_download(){
    let url = '/file/build';
    let fileName = 'data_super.zip';
    let type = fileName;

    return superagent.get(url)
                        .set('content-disposition', `attachment;filename=${type}`)
                        .set('content-type', 'application/x-download;charset=utf-8')
                        .type('blob')
                        .then(res => {
                        const blob = new Blob([res.data], {type: type})
                        const url = window.URL.createObjectURL(blob)
                        const link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        //檔名有效
                        link.setAttribute('download', fileName)
                        document.body.appendChild(link)
                        link.click()
                        document.body.removeChild(link)
                    })
                        
}

7. fetch下載

function fetch_download() { 
    //可以先提示'檔案下載中...'，這樣在下載框彈出之前，使用者體驗會好很多
    var url = "/file/build"; 
    fetch(url).then(res => res.blob().then(blob => { 
        var a = document.createElement('a'); 
        var url = window.URL.createObjectURL(blob);   // 獲取 blob 本地檔案連線 (blob 為純二進位制物件，不能夠直接儲存到磁碟上)
        var filename = res.headers.get('Content-Disposition');
        a.href = url; 
        a.download = filename.split('filename=')[1];
        a.click(); 
        window.URL.revokeObjectURL(url); 
        //提示'下載完成'; 
    })); 
}

參考：https://www.cnblogs.com/YMaster/p/7707989.html

https://segmentfault.com/a/1190000022255080

https://www.jb51.net/article/122797.htm