Vue中axios实现下载excel表格功能
Sonder
2020-10-21
1526字
4分钟
浏览 (3.1k)
之前遇到一个问题:就是做下载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);
}
},
这样做就可以实现文件的下载,如果你还没有解决,可以试试!