昨天实现下载功能的时候,本以为直接使用 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'})

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

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

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

let url = URL.createObjectURL(blob)

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

附上代码:

Logo

前往低代码交流专区

更多推荐