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);
  })
}

流程如下：

用户点击下载按钮
带有标头的GET请求被触发到后端
我订阅响应后，该Blob就会存储在浏览器内存中。
将Blob完全存储在浏览器中后，将开始saveAs /下载

第3步是问题所在。这个devtools屏幕快照with 108 MB transferred会累积到文件大小（我下载了100 mb文件），然后才开始将文件本身下载到文件系统。

Answer 1

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

角度下载大斑点

1 个答案: