请求设置

axios为例,需要将请求类型设置为 'blob' 或者 'arraybuffer'类型

异常 net:ERR_FAILED

当请求类型设置为 'blob' 时,发现一个情况,当请求的流大小有十多兆时,google浏览器会在请求到 10.5Mb左右时会提示网络错误而中断请求。有一种说法是说C盘空间不够导致的,需要先清理一下C盘;另一种解决方法就是 将请求类型设置为 'arraybuffer',我采用的是这个方法,不过获取到的流数据还是需要再使用 new Blob() 转换成 blob 格式

下载处理

后台以 文件流 的形式返回数据,前端使用 Blob 处理

  1. ajax().then(res => {
  2. let blob = new Blob([res.data]) // 假设res.data为文件流数据
  3. let objectURL = URL.createObjectURL(blob) // 根据blob创建下载链接
  4. let a = document.createElement('a')
  5. a.href = objectURL
  6. a.download = '自定义下载名字'
  7. a.click() // 模拟点击
  8. URL.revokeObjectURL(objectURL) // 释放URL对象
  9. })

相关知识

Blob

Blob 对象表示一个不可变、原始数组的类文件对象,它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作

Blob()构造函数

let blob = new Blob( array, options)

返回一个新的 Blob 对象,blob的内容由参数数组中给出的值串联组成

  • array 一个由 ArrayBufferArrayBufferViewBlobDOMString等对象构成的 Array
  • options 可以指定以下两个属性
    • type:默认值 ‘’,表示将放入到blob中的数组内容的MIME类型
    • endings:默认值 ‘transparent’, 用于指定包含行结束符\n的字符串如何被写入,默认保持 blob中保存的结束符不变,若设置为 ‘native’ ,则代表行结束符会被更改为适合宿主操作系统文件系统的换行符

      URL.createObjectURL(object)

      object:用于创建URL的 File对象、Blob对象、或 MediaSource对象

该方法创建一个 DOMString ,包含一个对象URL,该URL可用于指定源的内容

内存管理

每调用一次 createObjectURL() 方法,都会创建一个新的URL对象,即使已经使用相同的参数创建过,所以当不需要这些URL对象后,可以通过 URL.revokeObjectURL() 释放该对象;
虽然浏览器在 document 卸载时会自动释放它们,但是为了获得最佳性能和内存使用情况,应该在合适的时机主动释放。

a标签的download属性

此属性指示浏览器下载URL而不是导航到URL,点击后将提示用户将相关文件保存至本地;如果该属性设置了一个值,该值将作为下载文件的文件名。

  1. <a href="..." download />
  2. // or
  3. <a href="..." download="自定义文件名" />

📌 注意

  • 此属性仅适用于同源URLs
  • 可以使用 blob:URLsdata:URLs(base64格式)