Vue文件下载,有文件时正常下载,返回错误信息时正常提示错误信息

半路出家,很长一段时间我都以为下载时就只能下载文件,要是后端返回错误信息,由于响应类型是blob,所以错误提示不了。
花了半天时间找到一些资料说能同时处理下载和提示错误信息,尝试了一下,确实可行,特此记录一下。

axios.interceptors.response.use( res=>{
    // 通用下载处理方法
	const download = res =>{
		let fileNameTemp = ''
		for(let key in res.headers){
			if(key === 'content-disposition'){
				let fragments = res.headers[key].split(';')
				for(let i in fragments){
				 let fragement = fragments[i]
				 if(fragement){
					let header = fragement.trim().substr(0,8)
					if(header && header.toLowerCase() === 'filename'){
						fileNameTemp = fragement.trim().substr(9)
						break
					}
				 }
				}
			}
		}
		if(fileNameTemp === ''){
			return
		}
		let fileName = decodeURIComponent(fileNameTemp).replace(/["|']/g,'')
		let blob = new Blob([res.data])
		if('doownload' in document.createElement('a')){
			const link = document.createElement('a')
			link.download = fileName`
			link.style.display = 'none'
			link.href = URL.createObjectURL(blob)
			document.body.appendChild(link)
			link.click()
			URL.revokeObjectURL(link.href)
			document.body.removeChild(link)
		}else{
			navigator.msSaveBlob(blob,fileName)
		}
	}
	
	// 与后端约定好需要走逻辑下载的content-type
	const contentType = res.headers['content-type]
	const OFFICE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
	const EXCEL = 'application/vnd.ms-excel;charset=UTF-8'
	const CSV = 'application/download;charset=UTF-8'
	const FORCE = 'application/force-download;charset=UTF-8'
	const ZIP = 'application/zip;charset=UTF-8'
	if(res.headers && (contentType==='EXCEL' || contentType==='OFFICE')){
		download(res)
	}
	return res
	
},error => {
	return Promise.reject(error.data || error.message)
})

vue文件中下载方法

download(url,data){
this.$fetch({
	url: url,
	type: 'post',
	data: data || {},
	timeout: 5 * 60 * 1000,
	responseType: 'blob'
}).then(res=>{
	if(res.type === 'application/json'){
		let reader = new FileReader()
		reader.onload = e => {
			let info = JSON.parse(e.target.result)
			this.$message.warning(info.msg)
		}
		reader.readAsText(res)
	}
}).catch(()=>{
})
}

你可能感兴趣的:(vue.js)