乾貨：blob匯出檔案亂碼解決方案

這個bug太太太太，磨人了 ，從昨天下午找到今天下午！！！吐血了

直入正題：

後臺返回是這樣的：看圖 ↓

我的匯出程式碼是這樣的：

export function exportExcel(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios({
      method: "get",
      url: url, // 請求地址
      params,
      responseType: "blob" // 表明返回伺服器返回的資料型別
    }).then(
      (response) => {
        resolve(response);
        console.log(response)
        let blob = new Blob([response], {
          type: "application/vnd.ms-excel"
        });
        console.log(blob);
        let fileName = "匯出單據" + Date.parse(new Date()) + ".xls";
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName);
        } else {
          let link = document.createElement("a");

          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          link.click();
          // 釋放記憶體
          window.URL.revokeObjectURL(link.href);

        }
      },
      (err) => {
        reject(err);
      }
    );
  });
}

確認過眼神，這是沒有問題的！ 但是匯出下載後開啟是這樣的：↓

然後我找啊找，找了很久，網上方法都嘗試了。最後看到網上有盆友說可能是使用了mock模擬的原因，我就把mock的使用關掉了（沒有設定開關的盆友就可以在引入的位置註釋）。

就成功匯出了。。。。。踩坑太累了。。。。

 

額，更新一下，看了下我的程式碼，發現一點問題：

當responseType設定為‘blob’的時候，後臺返回就是blob物件了，前端 不用 再去new Blob 了,下面就是列印的返回結果：

所以拿到結果就可以直接用了，從新修改程式碼：

export function exportExcel(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios({
      method: "get",
      url: url, // 請求地址
      params,
      responseType: "blob" // 表明返回伺服器返回的資料型別
    }).then(
      (response) => {
        resolve(response);
        console.log(response)
        // 前面responseType設定的 “blob” 後臺返回的response直接就是 blob物件，前端不用再去new Blob了
        // let blob = new Blob([response], {
        //   type: "application/vnd.ms-excel"
        // });
        // console.log(blob);
        let fileName = "匯出單據" + Date.parse(new Date()) + ".xls";
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(response, fileName);
        } else {
          let link = document.createElement("a");

          link.href = window.URL.createObjectURL(response);
          link.download = fileName;
          link.click();
          // 釋放記憶體
          window.URL.revokeObjectURL(link.href);

        }
      },
      (err) => {
        reject(err);
      }
    );
  });
}