场景:
在工作中遇到这样一种场景:导入一个excel文件,后端会处理该文件是否符合导入要求,如果导入成功返回application/json格式数据附带返回告知导入成功,如果文件是空的或者一些其他原因也会通过这种方式返回错误提示。若excel内的数据格式存在问题,则通过返回一个application/vnd.ms-excel格式的excel文件流,前端需要将该文件下载下来供用户查看错误信息。
遇到的问题:
- 无法下载excel文件。
- response存在两种格式如何处理
解决方法:
无法下载是因为这是post请求返回个格式也不允许直接下载需要处理,首先需要设置responseType: "blob",这个responseType不是header中的而是和herder同级。返回的数据格式此时已经是blob了不需要再new Blob(res),此前查找了很多文章都需要转成blob这是错误的。
var file = param.file;
const formData = new FormData();
formData.append("file", file);
formData.append("assentId", this.searchParams.assetsId);
axios
.post("/download/url", formData, {
responseType: "blob",
headers: this.headers
})
.then(res => {
if (res.data.type === "application/vnd.ms-excel") {
const a = document.createElement("a");
a.download = "导入错误详情.xlsx";
a.href = window.URL.createObjectURL(res.data);
a.click();
a.remove();
this.$message.error(
res.data.msg || "导入失败,详情请查看导出的文档!"
);
} else if (res.data.type == "application/json") {
const that = this
const reader = new FileReader(); //创建一个FileReader实例
reader.readAsText(res.data, "utf-8"); //读取文件,结果用字符串形式表示
reader.onload = function() {
//读取完成后,**获取reader.result**
const data = JSON.parse(reader.result);
if (data.code == 1) {
that.$message.success("导入成功!");
that.rest();
} else {
that.$message.error(data.msg || "导入失败!");
}
};
}