vue 中实现下载功能(后端数据是 Blob 类型)
昨天实现下载功能的时候,本以为直接使用 window.location.fref, 就可以直接完成下载,但是多次尝试之后无法完成。在请求中后端要求要加上 token,通过 href 的方式走接口是不会走全局的接口拦截器的,所以就没有办法通过拦截器去往 request header 中添加 token;询问后端在 URL 中取 token 行不,后端说 NO,这样的话之后想办法走接口,询问后端后..
昨天实现下载功能的时候,本以为直接使用 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 事件完成下载
附上代码:
更多推荐
所有评论(0)