logo

当下载文件时,返回为流的形式,所以在请求的时候设置 responseType:’arraybuffer’ 或者设置为 responseType: ‘blob’ 的时候,只有当接口返回正确的时候才会下载文件,返回错误的时候,应该是提示用户出错了,但是使用 arraybuffer 或者 blob 的时候,错误的信息也是返回这个形式的。所以需要转换一下。

1.responseType:'arraybuffer'

当接口返回后,在 then 中接收到返回的数据 res ,需要转换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
try {
const str = JSON.parse(
new TextDecoder("utf-8").decode(new Uint8Array(res))
);
console.log("str", str);
if (str.code === 500) {
this.$message.error(`${str.msg}`);
}
} catch (_) {
const en = decodeURIComponent("考勤模板.xlsx");
const blob = new Blob([res], {
type: "application/vnd.ms-excel;charset=utf-8;charset=UTF-8",
});
if (window.navigator.msSaveOrOpenBlob) {
// 兼容ie
window.navigator.msSaveBlob(blob, en);
} else {
const downloadElement = document.createElement("a");
// 创建下载的链接
downloadElement.href = window.URL.createObjectURL(blob);
downloadElement.download = en; // 下载后文件名
document.body.appendChild(downloadElement);
// 此写法兼容火狐
const evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false);
downloadElement.dispatchEvent(evt);
document.body.removeChild(downloadElement);
}
}

2.responseType:'blob'

和前面的基本一样,但是在转换的时候有点差别
只需要将前面的 const str = JSON.parse(new TextDecoder("utf-8").decode(new Uint8Array(res))) 换成 const str = JSON.parse(res) 即可。