【axios】blob文件下载与下载进度监听
【代码】【axios】blob文件下载与下载进度监听。
·
【axios】 blob文件下载与下载进度监听
1.首先需要去响应器拦截中判断返回对应数据
request.interceptors.response.use(
response => {
const headers = response.headers
if (headers['content-type'] === 'application/octet-stream;charset=utf-8') {
return Promise.resolve(response) //这里只返回 response,便于用户根据headers去设置文件名称
}
return Promise.resolve(response.data)
},
error => {
return Promise.reject(error)
}
)
2.设置和下载生成文件
this.$axios.get('/XX/XX',{
params: params,
responseType: 'blob' //首先设置responseType 字段格式为 blob
timeout: 60000, //如果服务器文件较大的,这里超时时间可以设置长一点
onDownloadProgress: () => {
// 下载进度,这里可以根据进度值 去动态设置进度条值
const value = progressEvent.loaded / progressEvent.total * 100
}
// onUploadProgress 是上传进度
}).then(res=>{
// content 需要注意根据后端返回格式来
const content = res.data;
const blob = new Blob([content]);
const fileName = '导出文件.zip' //这里后端如果是zip文件,我们后缀就填zip。其他同一道理。
// 也可根据headers信息来获取后端返回文件名称
// const fileName = (res.headers['content-disposition'].split("="))[1]
if ('download' in document.createElement('a')) {
//非IE下载
const a = document.createElement('a');
a.download = fileName;
a.style.display = 'none';
a.href = window.URL.createObjectURL(blob);
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(a.href);
document.body.removeChild(a);
} else {
//IE10+下载
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(blob, _this.selected);
} else {
let URL = window.URL || window.webkitURL;
let downloadUrl = URL.createObjectURL(blob);
window.location = downloadUrl;
}
}
})
更多推荐
已为社区贡献1条内容
所有评论(0)