时间戳

首页 > 解决方案 > Angular 下载大块

javascript - Angular 下载大块

问题描述

我有一个与此类似的问题，我通过 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);
  })
}

这是过程：

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

第 3 步是问题所在。在开始下载到文件系统之前，这个传输了 108 MB的devtools 屏幕截图会累积到文件大小（我下载了一个 100 MB 的文件）。

标签： javascriptangulartypescriptget

解决方案

您可以尝试使用 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));

推荐阅读