以文件流的方式導出文件 vue+axios

通常狀況下,後端會提供一個下載連接,前端只須要使用location.href或者a標籤打開連接便可.

當後端返回的是文件流時,前端使用blob對象讀取流並使用a標籤下載.

axios({
       method: "get",
       url: this.downUrl,
       headers: {
         instuuid: sessionStorage.getItem("enterpriseUuid")
       },
       responseType: "blob" // 設置接收格式爲blob格式
     }).then(res => {
       console.log("res :>> ", res);
       const content = res.data;
       const blob = new Blob([content]); //構造一個blob對象來處理數據
       const fileName = "企業級條件項庫.xlsx";

       //對於<a>標籤，只有 Firefox 和 Chrome（內核） 支持 download 屬性
       //IE10以上支持blob可是依然不支持download
       if ("download" in document.createElement("a")) {
         //支持a標籤download的瀏覽器
         const link = document.createElement("a"); //建立a標籤
         link.download = fileName; //a標籤添加屬性
         link.style.display = "none";
         link.href = URL.createObjectURL(blob);
         document.body.appendChild(link);
         link.click(); //執行下載
         URL.revokeObjectURL(link.href); //釋放url
         document.body.removeChild(link); //釋放標籤
       } else {
         //其餘瀏覽器
         navigator.msSaveBlob(blob, fileName);
       }
     });