请求设置

以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 一个由 ArrayBuffer 、ArrayBufferView、Blob、DOMString等对象构成的 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:URLs 和 data:URLs（base64格式）