前端文件下载---创建本地Blob+a标签download属性

1. 如何处理 Fecth API 从后端获取的字节数据？
2. URL.createObjectURL() 做了什么？
3. “res.blob()” 做了什么？

1.Fecth API 请求的Response 对象 中的 blob（）方法，将字节属性转换为blob对象的Promise。

Blob 对象表示一个不可变、原始数据的类文件对象 。保存从后端获取的原始数据。

2.通过这个blob对象， 每次调用 URL.createObjectURL() 方法都会生成一个地址，这个地址代表着根据 blob 对象生成的资源入口，而这个资源入口存放于浏览器维护的一个 blob URL store 中。生成的 URL 由四部分组成：

有了这个地址，使用 a标签，设置download属性，预设下载的文件名字。

3、每次调用 res.blob() 方法都会执行 “consume body” 动作，“consume body” 的流程大概是这样的：

1. 获取字节流的读取器
2. 通过读取器读取所有的数据
3. 把数据包装成 blob 对象并返回

const getStream = async(url:string)=>{

  // fetch API解析流
  const res = await fetch(url).then(res=>res.blob())
  console.log(res);

  // 创建本地Blob
  const aLink = document.createElement('a')
  document.body.appendChild(aLink)
  // const blob = new Blob([res])
  //一个DOMString包含了一个对象 URL，该 URL 可用于指定源 object的内容，这个新的 URL 对象表示指定的 File 对象或 Blob 对象。
  aLink.href = URL.createObjectURL(res) 
  // download属性指定下载的文件名
  aLink.download = 'nestDownLoad.zip'
  aLink.click()  
  
}

// 1.将数据转换为blob或则file对象，2.createObjectURL() 创建URL，通过a标签 href指定url，download属性指定文件名

Tips：

download

此属性指示浏览器下载 URL 而不是导航到它

• 此属性仅适用于同源 URL。
• 尽管 HTTP URL 需要位于同一源中，但是可以使用 blob: URL 和 data: URL ，以方便用户下载使用 JavaScript 生成的内容（例如使用在线绘图 Web 应用程序创建的照片）。
• 如果 HTTP 头中的 Content-Disposition 属性赋予了一个不同于此属性的文件名，HTTP 头属性优先于此属性。

在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。

浏览器在 document 卸载的时候，会自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL