使用 javascript 下载大数据流 (> 1Gb)

Question

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

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

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

Answer 1

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

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

注二： 尽管看起来很神奇，但使用 createObjectURL 的基本技术在 Firefox 上对于最大 4GB 的文件完美无缺！！

Answer 2

如果您想从 api 或 url 中获取大文件 blob，您可以使用 streamsaver。

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 下载大数据流 (> 1Gb)

Download large data stream (> 1Gb) using javascript

javascript

blob

webrtc