vue 導出blob方式-3種方式

參考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字段在這里面存着