我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，[点击查看活动详情](https://s.juejin.cn/ds/jooSN7t "https://s.juejin.cn/ds/jooSN7t")
axios 设置 responseType:Blob，后台返回的数据会被强制转为blob类型，这时无法捕捉错误，并且这时后台返回的数据会有两种情况要处理，
1. 后台返回数据出现错误， blob 类型异常信息，使用 new FileReader()，将 blob 转为 json，然后进行处理
错误数据返回的类型的话就是，type:'application/json'，错误信息就在这个json类型数据中，需要转换一下
主要代码：解释就在代码注解里面了，方便理解
async exportDetail(row) {
// 你的请求参数
let form = {
id: row.id,
type: 1,
};
const data = await this.$http.exportExcel(
"你的请求地址",
form,
// 设置 responseType:'blob'，将返回数据转为blob，进行下载
{
responseType: "blob",
}
);
// 这个是我不需要知道错误信息，我只需要知道他不是需要的文件形式，报错了，我就直接给他提示错误信息了，想要知道错误信息的话，直接用下面的就可以啦
if (data.type === "application/json") {
// 说明是普通对象数据，后台转换失败，提示错误
this.$message.error("下载遇到一点问题，请稍后。。。。");
} else { // 说明type类型正常，就直接下载
downloadExcel(data, row.title); // 这个方法我写的下载方法，后面会贴出来， 使用：downloadExcel(下载数据，下载excel的名字)
}
// 这个是整体要拿到的错误信息
// if (data.type === "application/json") {
// let fileReader = new FileReader();
// fileReader.readAsText(data);
// fileReader.onload = (result) => {
// try {
// let jsonData = JSON.parse(result.target.result); // 说明是普通对象数据，后台转换失败
// console.log(jsonData);
// this.$message.error("下载遇到一点问题，请稍后。。。。");
// } catch (error) {
// // 解析成对象失败，说明是正常的文件流
// downloadExcel(data, row.invoice_title);
// }
// };
// }
},
- 我使用的话，只是判断了一下返回的 blob 文件的 type 来看请求是否成功，所以我就没有获取请求的错误信息，需要的话，看代码解释就行
new FileReader()相关解释
FileReader : 读取文件内容
- readAsText() 读取文本文件，(可以使用Txt打开的文件)
- readAsBinaryString(): 读取任意类型的文件，返回二进制字符串
- readAsDataURL: 方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片、excel文件)内嵌在网页之中，不用放到外部文件
- abort: 中断读取
FileReader 提供一个完整的事件模型，用来捕获读取文件的状态
- onabort:读取文件断片时触发
- onerror:读取文件错误时触发
- onload:文件读取成功时触发
- onloadend:文件读取完毕之后，不管成功还是失败触发
- onloadstart: 开始读取文件时触发
- onprogress:读取文件过程中触发
2. 后台返回数据正常，后台返回 blob 文件流：通过方法，直接下载
正确返回的类型的话就是，type:'text/html'
** 下载部分代码：**
export const downloadExcel = (data,fileName) => {
if (!data) {
return
}
// 兼容性
window.URL = window.URL || window.webkitURL
// 1. 创建链接
let url =window.URL.createObjectURL(new Blob([data]))
// 2. 创建 a 链接
let link = document.createElement('a')
// 3. 让这个 a 链接在页面中隐藏
link.style.disl=play = 'none'
// 4. 绑定 a 元素的href 为创建的url链接
link.href = url
// 5. 指定文件名称
let exportName = fileName || '导出明细'
// 6. 设置 a 元素的 download 属性，属性值为后面的值 setAttribute('属性名','属性值')
link.setAttribute('download',`${exportName}.xlsx`)
// 7. 将 a 元素添加到页面中
document.body.appendChild(link)
//8. 点击 a 元素进行下载 excel 文件
link.click()
// 9. 卸载url，释放内存
window.URL.removeObjectURL(url)
}
代码解释都在注释中了，很详细啦，ok，收工！
