Angular 下载大 blob

我有一个类似的问题this one https://stackoverflow.com/questions/46932213/how-to-download-large-file-with-javascript我成功下载了通过 HTTP GET 从后端生成的 blobbut在下载开始之前，文件将被保存到浏览器内存中。

下载小文件时没有问题，但不能立即下载 100mb 以上的文件。

订阅 GET 本身会导致保存大文件的延迟。

我正在使用带有对象存储后端的 Angular 6。这是下载功能：

finalDownload(url: string) {
  let headers = new HttpHeaders();

  headers = headers.append('X-Auth-Token', token);

  return this.http.get(url, { headers, responseType: 'blob' })
  .subscribe(response => {
    saveAs(response);
  })
}

过程如下：

1. 用户点击下载按钮
2. 带有标头的 GET 请求被触发到后端
3. 一旦我订阅了响应，该 blob 就会存储在浏览器内存中。
4. 当 blob 完全存储在浏览器中时，另存为/下载开始

第3步就是问题所在。 这个开发者工具截图已传输 108 MB https://i.stack.imgur.com/G2NFv.png在开始下载到文件系统之前，会累积到文件大小（我下载了一个 100 MB 的文件）。

您可以尝试使用 URL.createObjectURL：

URL.createObjectURL() 可用于构造和解析 URL。具体而言，URL.createObjectURL() 可用于创建对文件或 Blob 的引用。与 Base64 编码的数据 URL 不同，它不包含对象的实际数据 - 相反，它保存一个引用。

这样做的好处是它非常快。以前，我们必须实例化一个 FileReader 实例并将整个文件作为 base64 数据 URL 读取，这需要时间和大量内存。使用 createObjectURL()，可以立即获得结果，使我们能够执行诸如将图像数据读取到画布之类的操作。

使用以下代码作为参考

const blob = new Blob([data], { type: 'application/octet-stream' });
this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob));