浏览器端JavaScript能否实现文件分块流式下载？

当然能做到在接收第一块时就触发下载，把文件流式传输给用户，这不仅技术上可行，还能显著改善用户体验，甚至优化内存占用——并不是毫无意义的操作。

一、技术实现思路：用浏览器的ReadableStream流式传输 #

现代浏览器原生支持ReadableStream API，它允许你把服务器分块返回的数据直接流式传递给下载流程，不需要先把所有块存在内存里合并。举个简单的实现例子：

// 假设你的接口支持分块传输（返回Transfer-Encoding: chunked）
async function startStreamingDownload(url, filename) {
  const response = await fetch(url);
  // 确认响应支持流式
  if (!response.body) {
    throw new Error("浏览器不支持流式响应");
  }
  
  // 创建可读流的reader
  const reader = response.body.getReader();
  const stream = new ReadableStream({
    async start(controller) {
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        // 将接收到的块推送给流
        controller.enqueue(value);
      }
      controller.close();
    }
  });
  
  // 将流转为Blob，创建下载链接
  const blob = await new Response(stream).blob();
  const urlObj = URL.createObjectURL(blob);
  
  // 触发下载
  const a = document.createElement('a');
  a.href = urlObj;
  a.download = filename;
  a.click();
  
  // 清理资源
  URL.revokeObjectURL(urlObj);
}

不过更简洁的方式是直接利用Response.body的流来创建下载对象，不需要手动处理reader——上面的例子是为了展示分块处理的逻辑，实际可以简化为：

async function streamDownload(url, filename) {
  const response = await fetch(url);
  const blob = await new Response(response.body).blob();
  const urlObj = URL.createObjectURL(blob);
  
  const a = document.createElement('a');
  a.href = urlObj;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(urlObj);
}

二、为什么这很有意义？ #

1. 用户体验大幅提升：用户不用盯着页面等待“全部加载完成”的提示，从请求开始的第一秒就能看到浏览器的下载进度条在动，心理感知上会觉得“下载更快了”，尤其对于20-30MB的文件，这种等待感的消除很关键。
2. 减少内存占用：原来的方案需要把所有文件块存在内存里合并，30MB的文件会占用不少内存空间；流式下载则是边接收边写入磁盘，内存占用会低很多，对低配设备更友好。
3. 断点续传更友好：如果中途网络中断，浏览器的下载管理器已经保存了部分文件内容，恢复连接后可以继续下载（前提是服务器支持断点续传），而原来的方案如果中断，之前下载的块全部存在内存里，一旦页面刷新就会丢失。

三、需要注意的前提条件 #

• 服务器支持分块传输：你的后端接口需要返回Transfer-Encoding: chunked响应头，或者支持范围请求（Range），这样才能真正做到分块返回数据，否则浏览器还是会等全部内容接收完才开始处理。
• 浏览器兼容性：ReadableStream在Chrome、Firefox、Edge等现代浏览器都支持，但IE完全不支持，如果需要兼容旧浏览器，可能需要 fallback 到原来的方案。
• 文件格式无特殊依赖：大部分常见文件（压缩包、文档、视频等）都可以流式下载，因为浏览器只是原样保存字节流，不需要先解析整个文件结构。

关于总下载时长的疑问 #

理论上，总下载时长确实不会有明显变化——因为网络带宽是固定的，不管是一次性传输还是分块传输，总数据量一样。但用户感知的等待时长和实际体验是两回事，流式下载把“等待”变成了“正在进行”，这对用户来说差异很大。

内容的提问来源于stack exchange，提问作者Nikolai Kushpela