Question

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

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

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

Answer 1

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

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

注意II：尽管看起来很棒，但使用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'); });

使用javascript下载大数据流（＆gt; 1Gb）

2 个答案: