本文記錄一下在Vue中實現導出Excel表格的做法。參考度娘上各篇博客，最后實現功能
Excel表格，我的后端返回的是數據流，然后文件名是放進了content-disposition中，前端進行獲取。（前端也可以自己設置文件名）這其中遇到兩個問題，第一是文件名獲取不到；第二是返回的數據data已經被轉成了Blob無法讀取錯誤時后端反饋的信息
不多BB，上代碼和解決方法：
第一步發送請求
1 Axios.request({ 2 method: 'GET', 3 url: `${baseUrl}/order/export`, //請求地址 4 responseType: 'blob', //responseType ->用來設置返回值，默認是'',等同於text，數據格式的轉換是瀏覽器處理的 5 params: data, 6 timeout: 20000, 7 withCredentials: true, 8 })
第二步當請求發送以后接收后端返回的數據。
無論是成功時后端返回文檔流還是失敗返回一個對象，都會因為responseType: 'blob'變成一個Blob對象。當后台解析錯誤的時候，返回的就是正常的錯誤對象，包含錯誤碼和錯誤信息，如果不做處理，那么錯誤狀態和成功狀態都是blob類型，無法捕獲；
所以需要對返回值做特殊處理，嘗試把blob轉換為json格式，如果轉換成功則說明返回的數據不是文檔流，后台出錯，反之則文檔轉換正常：
Axios.request({
method: 'GET',
url: `${baseUrl}/order/export`,
responseType: 'blob',
params: data,
timeout: 20000,
withCredentials: true,
}).then((res) => {
//判斷后端解析是否成功（成功：數據為文檔流繼續操作。失敗：拿到錯誤信息，提示用戶）
let data = res.data;
let fileReader = new FileReader();
fileReader.onload = function () {
try {
let jsonData = JSON.parse(this.result);
if (jsonData.result === "2") {
// 說明是普通對象數據，且返回錯誤類型是2，直接將錯誤信息給用戶看
// to do something
Message.error(jsonData.msg)
}
} catch (err) {
// 解析成對象失敗，說明是正常的文件流
// alert('ok');
}
};
fileReader.readAsText(data);
//成功繼續處理后端返回的文檔流數據
const link = document.createElement('a')
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
link.style.display = 'none'
link.href = URL.createObjectURL(blob);
// link.setAttribute('download', '用戶_' + '.xlsx') 前端自己設置下載的文件名稱
//能獲取到content-disposition信息，需要后端在后台接口中，在響應頭中增加：context.Response.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition"); 前端便能獲取到
var fileName = res.headers['content-disposition'].split(";")[1].split("filename=")[1];
link.download = decodeURI(escape(fileName))
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
this.loading = !this.loading
}).catch(error => {
console.log(15, error)
})
}
}
在Vue中實現Excel文件導出大體如此，希望可以幫助到你哈。有不正之處，留言指點
參考博客：https://blog.csdn.net/dongguan_123/article/details/100183284
https://www.cnblogs.com/nanamiao/p/9407576.html