blob下载文件
我们常用的请求库是基于fetch封装的,fetch返回的是字节流,axios默认res.json()
做了解析,所以我们想用blob下载文件时,必须指定responseType: 'blob'
1.响应格式
export function time(data) {
return axios({
url: '/daochu',
method: 'post',
responseType: 'blob',// 1.首先设置responseType对象格式为 blob:
data
})
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
需要导出excel、csv、word、zip等类型,要带上对应的type来创建Blob对象,
后缀 | MIMEType |
---|---|
.doc | application/msword |
.docx | application/vnd.openxmlformatsofficedocument.wordprocessingml.document |
.xls | application/vnd.ms-excel |
.xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
.ppt | application/vnd.ms-powerpoint |
.pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation |
time(obj).then((res) => {
// 2.获取请求返回的response对象中的blob 设置文件类型,这里以excel为例
let blob = new Blob([res.data], {
// type 可以不用指定
type: "application/vnd.ms-excel",
});
// 3.创建一个临时的url指向blob对象
let objectUrl = window.URL.createObjectURL(blob);
// 4.创建url之后可以模拟对此文件对象的一系列操作,例如:预览、下载
let a = document.createElement("a");
a.setAttribute("href", objectUrl);
a.setAttribute("download", "表1.xlsx");
a.click();
// 5.释放这个临时的对象url
window.URL.revokeObjectURL(url);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
编辑 (opens new window)
上次更新: 2023/07/05