針對於這種的文件導出,最關鍵的是響應類型的設置,也就是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數據的話,一定要注意這一點!