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

Question

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

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

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

Answer 1

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

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

注二：尽管看起来令人惊奇，但基本技术createObjectURL在 Firefox 上对于最大 4GB 的文件运行得非常好！

Answer 2

if you want to fetch a large file blob from an api or url, you can use streamsaver.

npm install streamsaver

then you can do something like this

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

and you can use it like this:

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

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