前端JS 下載大檔案解決方案

輝是暖陽輝發表於2020-07-02
前端JS

問題場景

點選匯出按鈕，提交請求，下載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的解決方案

相關文章