解决：下载文件时axios配置responseType: 'blob'判断下载是否成功（避免后台返回失败标识时依然下载undefined文件）

描述：当下载文件时，axios配置responseType: ‘blob’，此时后台返回的数据会被强制转为blob类型；如果后台返回代表失败的data，前端也无法得知，依然会下载得到名为undefined的文件。

解决：将blob转回json格式，通过code判断是否下载成功

主要技术点：FileReader

axios配置：
axios({
method: ‘post’,
baseURL: ‘’,
url: ‘’l,
timeout: 3000,
headers: {},
data: options.method.toLowerCase() !== ‘get’ ? options.data : undefined,
responseType: ‘blob’
}).then(
res => {
const data = res.data
// 有可能下载失败，返回{code: ‘500’},但responseType: ‘blob’会把data强制转为blob，导致下载undefined.excel
// 解决：将已转为blob类型的data转回json格式，判断是否下载成功
let r = new FileReader()
r.onload = function () {
// 如果JSON.parse(this.result)不报错，说明this.result是json字符串，是下载报错情况的返回值，弹框提示
// 如果JSON.parse(this.result)报错，说明下载成功，进入catch
try {
let resData = JSON.parse(this.result) // this.result为FileReader获取blob数据转换为json后的数据，即后台返回的原始数据
if (resData && resData[‘code’] && resData[‘code’] === ‘500’) {
alert(‘下载失败’)
}
} catch (err) {
let fileName = res.headers[‘content-disposition’]
// 获取文件名
if (fileName && fileName.length >= 2) {
fileName = fileName.split(’=’)[1]
}
fileName = decodeURIComponent(fileName)
// 兼容ie11
if (window.navigator.msSaveOrOpenBlob) {
try {
const blobObject = new Blob([data])
window.navigator.msSaveOrOpenBlob(blobObject, fileName)
} catch (e) {
console.log(e)
}
return
}
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement(‘a’)
link.style.display = ‘none’
link.href = url
link.setAttribute(‘download’, fileName)
document.body.appendChild(link)
link.click()
resolve(fileName)
}
}
r.readAsText(data) // FileReader的API
}).catch(res => {
console.log(res)
})

————————————————

原文链接：https://blog.csdn.net/qq_37246828/article/details/90080614