后端返回字符流,前端處理進行excel文件導出操作


針對於這種的文件導出,最關鍵的是響應類型的設置,也就是responseType的設置(responseType:"arraybuffer"或者responseType:"blob"),這兩種類型都是可以的。responseType表明返回服務器返回的數據類型。

具體代碼如下:

方法一:(自己在具體項目上的應用)

// 接口調用方式(這是我的項目中的調用方式,自己應用具體看自己的設置)
export const exportSysOrgUser = (data) => {
  return api.post(`${server.patchBase}/sysOrgUser/exportSysOrgUser`, data,, {responseType:"arraybuffer"})
}
let result = this.exportSysOrgUser(params); // 接口調用返回的結果
// 文件導出處理
      let content = result;
      let fileName = "用戶數據.xls";
      let bolb = new Blob([content], { type: "application/vnd.ms-excel" });
      if ("download" in document.createElement("a")) {
        let link = document.createElement("a");
        link.download = fileName;
        link.style.display = "none";
        link.href = URL.createObjectURL(bolb);
        document.body.appendChild(link);
        link.click();
        URL.revokeObjectURL(link.href);
        document.body.removeChild(link);
      } else {
        navigator.msSaveBlob(bolb, fileName);
      }    

方法二:(網上看見的用axios方式請求)

axios({     
    url:'http://192.168.0.7:8010/sysOrgUser/exportSysOrgUser', // 請求路徑 method:'post', //請求方式 headers:{ contentType: 'application/json;charset=UTF-8', Authorization: this.$storage.getSession("token") // token }, params: params, // 參數 responseType: 'blob', // 表明返回服務器返回的數據類型 }).then((res) => { let data = res.data const blob = data const fileName = '訂單導出.xls' const elink = document.createElement('a') elink.download = fileName elink.style.display = 'none' elink.href = URL.createObjectURL(blob) document.body.appendChild(elink) elink.click() URL.revokeObjectURL(elink.href) // 釋放URL 對象 document.body.removeChild(elink) })

不管哪一種方式,最重要的是responseType:"arraybuffer"或者responseType:"blob"的設置,這個屬性是必須傳的!!!!

另外,在做的時候發現了一個很嚴重的問題,在自己的項目中上面的倆種方式導出的文件是亂碼的,這個問題困擾我2天時間,經過排查和查資料,最終發現是前端使用mock和responseType:"blob"之間沖突,導致responseType:"blob"沒有生效。具體原因暫時還沒搞明白,我把mock關閉,就一切正常了!!!

如果有人在自己的項目中用到mock數據的話,一定要注意這一點!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM