Vue中axios实现下载excel表格功能
Sonder
2020-10-21
1526字
4分钟
浏览 (3.2k)
之前遇到一个问题：就是做下载excel表格功能时，不知道怎么把后端返回的文件流转化成表格，上网看了很多方法，可能自己没有找对吧，确实可以实现下载，但是下载的表格内容是乱码，个人感觉应该是实现下载函数方法写错了，现在实现了，先记录一下，为了方便日后自己的学习。
上图就是调取后端接口成功后返回的文件流
第一步：先写接口函数（以我的代码为例）
responseType 表示服务器响应的数据类型，可以是 arraybuffer, blob, document,json, text, stream，默认是json
let url = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_apiUrl + '/buyerCenter/extractAccountData' : '/buyerCenter/extractAccountData';
axios({
method: 'POST',
url: url,
withCredentials: true, // 允许携带cookies
responseType: "arraybuffer", // 重点
data: p
}).then(res => {
let filename = "xxx.xlsx";
this.fileDownload(res.data, filename);
done();
}).catch(() => {
this.$message.error('提取xxx报表失败，请检查网络后重试！');
})第二步：写个下载文件的函数方法
fileDownload(data, fileName) {
let blob = new Blob([data], {
type: "application/octet-stream"
});
let filename = fileName || "filename.xls";
if (typeof window.navigator.msSaveBlob !== "undefined") {
window.navigator.msSaveBlob(blob, filename);
} else {
var blobURL = window.URL.createObjectURL(blob);
var tempLink = document.createElement("a");
tempLink.style.display = "none";
tempLink.href = blobURL;
tempLink.setAttribute("download", filename);
if (typeof tempLink.download === "undefined") {
tempLink.setAttribute("target", "_blank");
}
document.body.appendChild(tempLink);
tempLink.click();
document.body.removeChild(tempLink);
window.URL.revokeObjectURL(blobURL);
}
},这样做就可以实现文件的下载，如果你还没有解决，可以试试！