axios 设置的responseType 为blob下载文件,
2021-07-08 本文已影响0人
有你有团
使用axios的responseType设置为blob下载文件
- 成功时
// 兼容ie
if(window.naviagtor.msSaveBlob){
try{
const blobData = new Blob([res.data])
window.navigator.msSaveBlob(blobData,'文件名')
}catch(e){
console.log('下载文件失败')
}
}else{
const url = window.URL.createobjectURL(res.data)
const link = document.createElement('a')
link.href = url
link.download = '文件名'
link.click()
URL.revokeobjectURL(url)
}
- 失败时
当下载文件失败,后端返回json格式,但是在响应体里面无法获取响应体,此时就需要将blob转换为json
主要使用FileReader构造函数
**FileReader**
对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File
或Blob
对象指定要读取的文件或数据。
const reader = new FileReader()
reader.onload = (event) => {
const result = JSON.parse(event.target.result)
// 此时可以根据后端相应数据进行提示
}
注意点
如果使用 FileReader 将blob转换为必须等待响应体返回 type:'application/json',注意ie浏览器中返回的type类型,带有charset=utf-8 ,可以优先使用type进行判断,如果type 包含application/json,就进行错误处理
完整代码
function downloadFile(id){
axios.post('/file',{fileId:id}).then(res => {
if(res.data.type.indexOf('application/json') > -1){
const reader = new FileReader()
reader.onload = (event) => {
const result = JSON.parse(event.target.result)
// 此时可以根据后端相应数据进行提示
}
}else{
if(window.naviagtor.msSaveBlob){
try{
const blobData = new Blob([res.data])
window.navigator.msSaveBlob(blobData,'文件名')
}catch(e){
console.log('下载文件失败')
}
}else{
const url = window.URL.createobjectURL(res.data)
const link = document.createElement('a')
link.href = url
link.download = '文件名'
link.click()
URL.revokeobjectURL(url)
}
}
})
}