vue 中实现下载功能（后端数据是 Blob 类型）

昨天实现下载功能的时候，本以为直接使用 window.location.fref, 就可以直接完成下载，但是多次尝试之后无法完成。

在请求中后端要求要加上 token，通过 href 的方式走接口是不会走全局的接口拦截器的，所以就没有办法通过拦截器去往 request header 中添加 token；询问后端在 URL 中取 token 行不，后端说 NO，这样的话之后想办法走接口，询问后端后得知它们返回的是 Blob 类型的数据。（黑人问号）

百度一番得知 Blob 类型就是：表示一个不可变、原始数据的类文件二进制对象。

Blob 链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

得知这个之后就开始查怎么下载二进制的这个 Blob 对象，

1. 在请求中要配置 responseType: 'Blob' // ArrayBuffer/ArrayBufferView/DOMString 都可以，原因：https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob

为什么要设置 responseType: 'Blob', 原因：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/responseType

2. 在接口返回的结果中要 new 一个 Blob()

const blob = new Blob([res], {type: 'application/octet-stream'})

第一个参数：是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。

第二个参数：默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型。

3. 使用 URL.createObjectURL(blob) 生成一个 URL

let url = URL.createObjectURL(blob)

4. 动态创建 a 标签并执行 click 事件完成下载

附上代码：