參考https://zhuanlan.zhihu.com/p/350069246

問題描述

我們日常做專案，特別是後臺管理系統，常常需要匯出excel檔案。實現方式有三種

方式一（後端處理）

後端直接返回一個excel表格地址，前端點選下載即可。不過這種方式，會導致後端的excel越存越多，造成冗餘。不過如果是固定模板表格內容不會變得情況下，這種方式還是不錯的。當然解決方案就是後端寫一個定時器，每隔一段時間清理一次

看情況使用，如果是固定的表格，一兩年都不更換的excel表格用這種方式倒是也可以的。後端固定寫死只把這個固定的表格傳遞給前端，這樣的話，也能用

方式二（後端處理）

後端返回一個blob流檔案，這樣的話，是一次性的流檔案，使用一次就沒了，就不會造成後端excel越存越多。這種方式挺好

目前這種方式使用的會稍微多一些點

方式三（前端處理）

前端儲存需要匯出的表格內容，然後下載並使用excel外掛輪子，就可以匯出了。不過眾所周知，前端只是拿到資料，並展示資料的。如果表格內容比較多，或者使用者對於前端速度有要求的話，或者主管老大不希望我們在專案中下載安裝太多的輪子從而導致最終打包檔案過大的話，這種方式就不太好

不太推薦

流檔案匯出步驟

流檔案匯出注意事項

需要加responseType: 'blob'，否則檔案會損壞

 /**
  * get方法，對應get請求
  * @param {String} url [請求的url地址]
  * @param {Object} params [請求時攜帶的引數]
  
 
*/
 export function getFile(url, params) {
   return new Promise((resolve, reject) => {
     axios({
       method: 'get',
       url,
       params,
       headers: {
         'Content-Type': 'application/json; application/octet-stream'
       },
       responseType: 'blob',
       timeout: 100000
     }).then((res) 
 
=> {
       resolve(res)
     }).catch(err => {
       reject(err.data)
     })
   })
 }

//blob流匯出-content-disposition檔名
export function downExcel(data) {
    let headers = data.headers;
    let fileName = headers["content-disposition"];
    let decd = decodeURIComponent(
      fileName.substring(20, fileName.length - 5)
    );
    const blob = new Blob([data.data]);
    var a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = `${decd}.xlsx`;
    a.style.display = "none";
    document.body.appendChild(a);
    a.click();
    a.remove();
  }

content-disposition 後臺把動態的excel欄位在這裡面存著