使用 StreamSaver.js 流式传输大型 blob 文件

Question

我正在尝试使用Angular 组件中的StreamSaver.js将大型数据文件从服务器直接下载到文件系统。但在~2GB之后就会出现错误。数据似乎首先被传输到浏览器内存中的 blob 中。而且可能有 2GB 的限制。我的代码基本上取自 StreamSaver 示例。知道我做错了什么以及为什么文件没有直接保存在文件系统上吗？

服务：

public transferData(url: string): Observable<Blob> {
    return this.http.get(url, { responseType: 'blob' });
}

成分：

download(url: string) {
    this.extractionService.transferData(url)
      .subscribe(blob => {
        const fileStream = streamSaver.createWriteStream('data.tel', {
          size: blob.size
        });
        const readableStream = blob.stream();
        if (window.WritableStream && readableStream.pipeTo) {
          return readableStream
            .pipeTo(fileStream)
            .then(() => console.log("done writing"));
        }
        const writer = fileStream.getWriter();
        const reader = readableStream.getReader();
        const pump = () =>
          reader.read()
            .then(res => res.done ? writer.close() : writer.write(res.value).then(pump));
        pump();
      });
}

请求文件的标头：
“Content-Type：application/octet-stream\r\n”
“Content-Disposition：附件；filename=data.tel\r\n”

Answer 1

建议/背景

StreamSaver 的目标用户是那些在客户端生成大量数据的用户，例如长时间的摄像机录制。如果文件来自云端并且您已经有Content-Disposition附件标头，那么您唯一需要做的就是在浏览器中打开此 URL。

下载文件的方法有以下几种：

• location.href = url
• <a href="url">download</a>
• <iframe src="url" hidden>
• 对于那些需要发布数据或使用其他 HTTP 方法的人，他们可以发布（隐藏）<form>。

只要浏览器不知道如何处理该文件，它就会触发下载，这就是您已经在做的事情Content-Type: application/octet-stream

由于您正在使用 Ajax 下载文件，并且浏览器知道如何处理数据（将其提供给主 JS 线程），因此Content-Type和Content-Disposition没有任何作用。

StreamSaver 尝试模仿服务器如何使用 ServiceWorkers 和自定义响应保存文件。
您已经在服务器上执行此操作了！您唯一要做的就是停止使用 AJAX 下载文件。所以我认为您根本不需要 StreamSaver。

你的问题

...是您首先将整个数据作为 Blob 下载到内存中，然后保存文件。这违背了使用 StreamSaver 的全部目的，那么您也可以使用更简单的 FileSaver.js 库或像 FileSaver.js 一样从 Blob 手动创建对象 url + 链接。

Object.assign(
  document.createElement('a'), 
  { href: URL.createObjectURL(blob), download: 'name.txt' }
).click()

此外，你不能使用 Angular 的 HTTP 服务，因为它们使用旧的服务，而且它不能像以前那样XMLHttpRequest为你提供 ReadableStream ，所以我的建议是简单地使用 Fetch API。fetchresponse.body

https://github.com/angular/angular/issues/36246