请求设置
以axios
为例,需要将请求类型设置为 'blob'
或者 'arraybuffer'
类型
异常 net:ERR_FAILED
当请求类型设置为 'blob'
时,发现一个情况,当请求的流大小有十多兆时,google浏览器会在请求到 10.5Mb
左右时会提示网络错误而中断请求。有一种说法是说C盘空间不够导致的,需要先清理一下C盘;另一种解决方法就是 将请求类型设置为 'arraybuffer'
,我采用的是这个方法,不过获取到的流数据还是需要再使用 new Blob()
转换成 blob
格式
下载处理
后台以 文件流
的形式返回数据,前端使用 Blob
处理
ajax().then(res => {
let blob = new Blob([res.data]) // 假设res.data为文件流数据
let objectURL = URL.createObjectURL(blob) // 根据blob创建下载链接
let a = document.createElement('a')
a.href = objectURL
a.download = '自定义下载名字'
a.click() // 模拟点击
URL.revokeObjectURL(objectURL) // 释放URL对象
})
相关知识
Blob
Blob
对象表示一个不可变、原始数组的类文件对象,它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream
来用于数据操作
Blob()构造函数
let blob = new Blob( array, options)
返回一个新的 Blob
对象,blob的内容由参数数组中给出的值串联组成
- array 一个由
ArrayBuffer
、ArrayBufferView
、Blob
、DOMString
等对象构成的 Array - options 可以指定以下两个属性
该方法创建一个 DOMString
,包含一个对象URL,该URL可用于指定源的内容
内存管理
每调用一次 createObjectURL()
方法,都会创建一个新的URL对象,即使已经使用相同的参数创建过,所以当不需要这些URL对象后,可以通过 URL.revokeObjectURL()
释放该对象;
虽然浏览器在 document
卸载时会自动释放它们,但是为了获得最佳性能和内存使用情况,应该在合适的时机主动释放。
a标签的download属性
此属性指示浏览器下载URL而不是导航到URL,点击后将提示用户将相关文件保存至本地;如果该属性设置了一个值,该值将作为下载文件的文件名。
<a href="..." download />
// or
<a href="..." download="自定义文件名" />
📌 注意
- 此属性仅适用于同源URLs
- 可以使用
blob:URLs
和data:URLs
(base64格式)