问题描述:项目中导出excel向后端请求接口,当存在需要导出的文件时,后端直接返回文件流。
当出现错误信息时,后端返回错误信息,前端需要弹出提示用户。
但是在请求下载时,需要指定responseType为'blob':
当返回信息时我们想根据res.data来判断是文件流还是JSON信息来进行对应的操作时会发现此时得到的res.data都是一个Blob对象,这是在接口请求时就定好了,改变不了的。
这个时候我们可以将Blob转为String字符串,尝试使用JSON.parse反序列化,如果存在错误信息 msg字段,那么就弹出信息提示,否则的话都走下载文件流程。
//导出excel
exportExcel () {
let loading = this.$loading({ text: "努力请求中~" });
ExportKaiPiaoGTH(this.where).then(res => {
loading.close();
//获取文件名
let headerArr = res.headers?.["content-disposition"]?.split(";") || [];
let nameArr = headerArr[1]?.split("=") || [];
let fileName = nameArr[1] || "";
fileName = decodeURI(fileName);
let blob = new Blob([res.data])
//将Blob 对象转换成字符串
let reader = new FileReader();
reader.readAsText(blob, 'utf-8');
reader.onload = () => {
try {
let result = JSON.parse(reader.result);
if (result.msg) {
this.$message.error(result.msg);
} else {
this.downloadBlob(blob, fileName);
}
} catch (err) {
console.log(err);
this.downloadBlob(blob, fileName);
}
}
}).catch(err => {
loading.close();
this.$message.error(err.message);
})
},
//将blob下载为文件
downloadBlob (blob, fileName) {
const downloadElement = document.createElement('a');
const href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = fileName || '客户开票详情.xlsx'; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
}