【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;
		}
	}
})