前端JS 下載大文件解決方案

• 2020 年 7 月 2 日
• 筆記
• VUE, WEB, 前端

問題場景

點擊導出按鈕，提交請求，下載excel大文件（超過500M），該文件沒有預生成在後端，
直接以文件流的形式返回給前端。

解決方案

在Vue項目中常用的方式是通過axios配置請求，讀取後端返回的文件流，常用程式碼如下：

axios({
    method: 'post',
    url: 'api/file',
    responseType: 'blob'
}).then(res=> {
     if (res.data){
      filename = 'filename';
      let blob = new Blob([res.data],{type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"});
      if (window.navigator.msSaveOrOpenBlob){
          // IE10+下載
        navigator.msSaveOrBlob(blob, filename);
      }else{
          // 非IE10+下載
        let link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;
        document.body.appendChild(link);
        var evt = document.createEvent("MouseEvents");
        evt.initEvent("click", false, false);
        link.dispatchEvent(evt);//釋放URL 對象
        document.body.removeChild(link);
      }
}).catch((error) => {
  console.log(error)
})

這種方式是把文件流讀取到瀏覽器記憶體中，再下載，但是今天在這種大文件場景下它不香了，
由於記憶體過大，直接把網頁給搞崩了，喔豁😂

怎麼辦呢，終於在Github上找到了一個大神的庫，用起來真香，Github地址

根據介紹，在chrome瀏覽器2G以下的文件下載可以得到很好的支援

使用步驟

1.安裝npm依賴

npm install file-saver --save

2.引入程式碼

+ import { saveAs } from 'file-saver';
...
+      saveAs(blob, fileName );

3.完整例子

+ import { saveAs } from 'file-saver';
  axios({
    method: 'post',
    url: 'api/file',
    responseType: 'blob'
}).then(res=> {
     if (res.data){
       fileName = this.fileName;
      // 有文件名就用自定義的，沒有就從header獲取
        if (!fileName) {
          fileName = fileNameFromHeader(
            res.headers["content-disposition"] || ""
          );
        }
        
      let blob = new Blob([res.data],{
      type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"});
+      saveAs(blob, fileName );
      }
}).catch((error) => {
  console.log(error)
})

function fileNameFromHeader(disposition) {
  let result = null;
  disposition = disposition.split(";")[1];
  if (disposition && /filename=.*/gi.test(disposition)) {
    result = disposition.match(/filename=.*/gi);
    return decodeURIComponent((result[0].split("=")[1]).replace(/\+/g, '%20'));
  }
  return "null";
}

4.其他問題

下載大文件過程中遇到的其他問題

• axios請求超時，注意配置timeout
• Nginx 響應超時報504 網關超時錯誤，注意配置Nginx
• 控制台報error response，瀏覽器請求長時間得不到響應，本地調試代理轉發超時造成的，參考
• 文件超過2G的解決方案