使用javascript下载大数据流（> 1Gb）

Question

我想知道是否有可能将数据从javascript流式传输到浏览器的下载管理器。

使用webrtc，我将数据（从文件> 1Gb）从浏览器传输到另一个。在接收器端，我将所有这些数据存储到内存中（作为arraybuffer ...所以数据基本上仍然是块），我希望用户能够下载它。

问题：Blob对象的最大大小约为600 Mb（取决于浏览器），因此我无法从块中重新创建文件。有没有办法流式传输这些块，以便浏览器直接下载它们？

Answer 1

按照@ guest271314的建议，我在我的项目中添加了StreamSaver.js，并且我在Chrome上成功收到了大于1GB的文件。根据文档，它应该适用于高达15GB的文件，但我的浏览器在此之前崩溃了（我的最大文件大小约为4GB）。

注意I：为了避免Blob max size限制，我还尝试手动将数据附加到<a></a>的href字段，但它失败了大约600MB的文件...

注意二：尽管看起来很惊人，但使用createObjectURL的基本技术在Firefox上的工作效果非常好，最高可达4GB！

Answer 2

如果要从api或url获取大文件blob，可以使用streamaver。

npm install streamsaver

然后你可以做这样的事情

import { createWriteStream } from 'streamsaver';

export const downloadFile = (url, fileName) => {
  return fetch(url).then(res => {
    const fileStream = createWriteStream(fileName);
    const writer = fileStream.getWriter();
    if (res.body.pipeTo) {
      writer.releaseLock();
      return res.body.pipeTo(fileStream);
    }

    const reader = res.body.getReader();
    const pump = () =>
      reader
        .read()
        .then(({ value, done }) => (done ? writer.close() : writer.write(value).then(pump)));

    return pump();
  });
};

你可以像这样使用它：

const url = "http://urltobigfile";
const fileName = "bigfile.zip";

downloadFile(url, fileName).then(() => { alert('done'); });