一般來說，導(dǎo)出有2種實現(xiàn)方式：

1. 直接放a標簽里，通過href屬性向后端發(fā)送請求導(dǎo)出

<a href="url">導(dǎo)出</a>

很明顯的缺點：文件名不正確，是一串字符串。所以需要使用第二種方法。

2. 需要進行數(shù)據(jù)處理的情況：手動 coding 發(fā)送請求的代碼，將返回的 blob 對象導(dǎo)出。
   問題來了：如何導(dǎo)出呢？好像沒有思路-_-
   好好思考：
   • 由方法一知：a標簽可以直接導(dǎo)出。
     那么js應(yīng)該可以模擬一個a標簽。
   • url哪里來呢？
     createObjectURL可以將blob對象轉(zhuǎn)換為url,可以像普通的 url 一樣使用。
   • 最后一個問題：如何導(dǎo)出excel格式呢？
     MDN告訴我：用Blob 構(gòu)造函數(shù)聲明MIME類型就好。

思路整理好了，一步步實現(xiàn)唄：

this.$axios.get("XXX", {
      params,
      responseType: "blob",
})
.then((res) => {
      let blob = new Blob([res.data], {
           type: "application/vnd.ms-excel",
      });
      let fileName = "導(dǎo)出.xls";
      let link = document.createElement("a");
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
      // 移除url
      window.URL.revokeObjectURL(link.href);
      //移除標簽
      document.body.removeChild(link)
})

ps:一個編碼好習慣：及時清除已執(zhí)行完的變量，釋放內(nèi)存。

試了下，可以正確導(dǎo)出了。

正暗自歡喜已解決導(dǎo)出問題時，打開導(dǎo)出的excel一看：

excel

快樂沒了

這啥？？？401？這不是接口給的登錄提示信息么？而且是json 類型呀？o~o,忘記錯誤處理了。。。

看了下此刻接口的返回情況：

401

FileReader

那就試一下，完善下上面的代碼：

this.$axios.get("XXX", {
       params,
       responseType: "blob",
}).then((res) => {
       if (res.data.type === "application/json") {
          // 返回的格式是json類型，轉(zhuǎn)換為json
          const reader = new FileReader();
          const self = this;
          // 讀取操作完成時觸發(fā)
          reader.onload = function () {
               const resData = this.result && JSON.parse(this.result);
               self.$message.error({
                   showClose: true,
                   message: (resData && resData.msg) || "導(dǎo)出失敗"
               });
          };
          reader.onerror = (event) => {
                self.$message.error({
                      showClose: true,
                      message: reader.error
                });
          };
          reader.readAsText(res.data); //a text string
       } else {
          let blob = new Blob([res.data], {
              type: "application/vnd.ms-excel",
          });
          let fileName = "導(dǎo)出.xls";
          let link = document.createElement("a");
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          link.click();
          // 移除url
          window.URL.revokeObjectURL(link.href);
          //移除標簽
          document.body.removeChild(link);
       }
});

完美收官！