本文系转载，转载链接：Chrome 下载大文件报错！用 Streamsaver.js 完美填坑
前言
用 Chrome 下载大文件时，有时会弹出 “网络错误”，换其他浏览器却能正常下载。今天就来排查一下这个问题产生的原因，提供一些解决思路给大家。
一、为什么 Chrome 独有的 “大文件下载坑”？
同样的网络、同样的文件，Chrome 报错而其他浏览器正常，核心问题出在 Chrome 对 “大文件数据处理” 的特殊限制上：Chrome 处理大文件时，默认用Blob类型存储数据，但Blob对大文件有隐性限流，一旦文件超过阈值，就会触发 “网络错误” 的保护机制；而其他浏览器对Blob的限制更宽松，所以能正常下载。
二、尝试思路：把 responseType 从 Blob 换成 ArrayBuffer
如果下载的文件在 1-2G 之间，这个方法能快速解决问题，具体操作和原理如下：
1. 为什么换 ArrayBuffer 有用？
Blob像 “固定大小的纸箱”，装太大的东西会变形（触发限流）；而ArrayBuffer像 “可伸缩的布袋”，能更灵活地容纳大文件数据，避开 Chrome 对Blob的限流机制。简单来说，把请求响应的数据类型从Blob改成ArrayBuffer，就能让 Chrome 正常处理 1-2G 的文件下载。
2. 注意：ArrayBuffer 不是 “万能药”
这个方法有明确的局限：当文件超过 3G 时，ArrayBuffer会占用大量内存，从而导致两种问题出现 —— 要么 Chrome 直接崩溃，要么下载的文件变成几 K / 几 B 的残缺文件，相当于 “布袋装太多东西会撑破”。如果你的文件在 3G 以内，用这个方法能临时救急；超过 3G，就需要更彻底的方案。
三、完美解决 —— 用 Streamsaver.js 实现流式下载，支持超大文件
经过多次尝试，最终发现Streamsaver.js能彻底解决问题，它就像 “给大文件开了‘绿色通道’”，通过 “流式传输” 边接收数据边保存，不占用大量内存，还能避开 Chrome 的各种限制。
1. 什么是 “流式传输”？
传统下载是 “先把整个文件收到浏览器里，再保存到本地”，就像 “先把水装满桶，再倒进盆里”，但是桶太小就会溢出；而流式传输是 “收到一点水就倒进盆里”，不用等水装满桶，既能处理超大文件，又不占用过多内存。
2. Streamsaver.js 的具体使用步骤
第一步：安装依赖
在项目中执行命令安装Streamsaver.js：
npm i streamsaver
第二步：编写下载函数
在代码中引入工具并编写下载逻辑：
import streamSaver from "streamsaver"
export async function streamSaverTest(url, name) {
var url = baseURL + url
const currentUrl = window.location.origin;
StreamSaver.mitm = `${currentUrl}/mitm.html?version=2.0.0`
const fileStream = StreamSaver.createWriteStream(`${name}.zip`);
fetch(url, {
method: 'GET',
headers: { 'Authorization': 'Bearer ' + getToken() },
}).then((res) => {
console.log('=-res', res)
const readableStream = res.body
if (window.WritableStream && readableStream.pipeTo) {
return readableStream.pipeTo(fileStream).then(() => console.log('下载完成'))
}
})
}
3. 为什么不用 Axios，偏用 Fetch？
因为 Axios 的responseType只支持arraybuffer、blob等固定类型，不支持 “流（stream）”；而 Fetch 能直接获取响应的body流数据，和Streamsaver.js的流式传输完美适配。
四、总结
在建设网站的过程中，面对 Chrome 大文件下载错误，通用 Streamsaver.js 做流式下载，一般情况都可以解决问题。
