fetch如何下载大文件

`fetch` 本身并不直接支持下载大文件，因为它设计得更偏向于同步或异步读取较小的数据块。对于大文件下载，推荐使用流（Stream）的概念，因为一次性加载整个文件可能会消耗大量内存。以下是一种利用 `fetch` 加上 `ReadableStream` 的方法来下载大文件：

1. 创建一个进度回调函数，记录下载进度：

let totalSize = 0; // 初始化总大小为0
const onProgress = (event) => {
  totalSize += event.loaded;
  console.log(`已下载 ${totalSize} 字节`);
};

2. 使用 `fetch` 返回的 `body` 作为 `ReadableStream`：

fetch('http://large-file-url.com', {
  headers: {
    Range: 'bytes=0-' + totalSize - 1, // 开始位置和结束位置（含）
  },
})
.then(res => {
  if (!res.ok) {
    throw new Error('Failed to download');
  }
  return res.body.stream(); // 转换为 ReadableStream
});

3. 创建一个 `WritableStream` 或者一个 `Blob` 来接收数据，并在接收完成后保存文件：

const writeStream = new WriteableStream({ size: totalSize }); // 或创建Blob

stream.ondata = chunk => {
  writeStream.write(chunk);
};

stream.onload = () => {
  // 文件下载完成，开始保存
  writeStream.close().then(() => {
    saveAs(writeStream.getReader().readableByteRange.start, 'large-file-name');
  });
};

4. 错误处理：

stream.onerror = error => {
  console.error('Download failed:', error);
};