javascript - Angular 下载大块

Question

我有一个类似于 this one 的问题我通过 HTTP GET 成功下载了从后端生成的 blob但是 在下载开始之前，文件正在保存到浏览器内存中。

下载小文件时没有问题，但不会立即下载 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);
  })
}

这是过程:

用户点击下载按钮

带有 header 的 GET 请求被触发到后端

一旦我订阅响应，blob 就会存储在浏览器内存中。

当 blob 完全存储在浏览器中时，另存为/下载开始

第 3 步是问题所在。
这个 devtools 截图 with 108 MB transferred在下载到文件系统之前，累积到文件大小(我下载了一个 100 mb 的文件)。

Answer 1

您可以尝试使用 URL.createObjectURL:

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

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

使用以下代码作为引用

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