大文件（300MB+）前后端下载方案优化求助

核心问题根源 #

用Base64编码传输大文件会让数据体积膨胀约33%，且前端需要把整个Base64字符串解码成Blob，这会占用远超文件本身的内存，300MB的文件解码后内存占用可能超过400MB，直接导致浏览器内存溢出崩溃。

前端替代实现方案 #

方案1：直接触发浏览器原生下载（推荐）

跳过Blob和ObjectURL的内存消耗，直接让浏览器处理后端返回的二进制流：

downloadFile(fileUrl: string, fileName: string = '') {
  const downloadLink = document.createElement('a');
  downloadLink.href = fileUrl; // 后端直接提供的文件下载接口地址
  downloadLink.download = fileName;
  downloadLink.style.display = 'none';
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}

如果需要携带请求头（如身份令牌），可将令牌拼在URL参数里（注意安全场景），或用Cookie传递身份信息；若必须在请求头中携带，可结合fetch流式处理响应。

方案2：流式处理响应（适用于自定义场景）

用fetch的流式API逐步读取数据，避免一次性加载整个文件到内存：

async function downloadLargeFile(url: string, fileName: string) {
  const response = await fetch(url, {
    headers: {
      'Authorization': 'Bearer your-token' // 按需添加请求头
    }
  });
  if (!response.ok) throw new Error('下载失败');
  
  const blob = await response.blob(); // 流式构建Blob，内存占用更低
  const downloadLink = document.createElement('a');
  const objectUrl = URL.createObjectURL(blob);
  
  downloadLink.href = objectUrl;
  downloadLink.download = fileName;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  
  setTimeout(() => {
    URL.revokeObjectURL(objectUrl);
    document.body.removeChild(downloadLink);
  }, 100);
}

后端替代实现方案 #

核心是返回二进制文件流，而非Base64编码内容，同时设置正确的响应头：

1. 取消Base64编码步骤，直接读取文件的二进制内容返回给客户端
2. 设置关键响应头：
   • Content-Type: 对应文件的MIME类型（如application/pdf、image/jpeg，通用类型用application/octet-stream）
   • Content-Disposition: attachment; filename="你的文件名.ext"，告诉浏览器触发下载而非预览
   • Content-Length: 文件的实际字节大小（可选，可让浏览器显示下载进度）
3. 若后端支持，开启分块传输（Transfer-Encoding: chunked），进一步降低服务器内存占用

以Java Spring Boot为例，后端代码示例：

@GetMapping("/download")
public ResponseEntity<Resource> downloadFile(@RequestParam String filePath) throws IOException {
  File file = new File(filePath);
  Path path = Paths.get(file.getAbsolutePath());
  Resource resource = new UrlResource(path.toUri());
  
  return ResponseEntity.ok()
      .contentType(MediaType.APPLICATION_OCTET_STREAM)
      .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getName() + "\"")
      .body(resource);
}

内容的提问来源于stack exchange，提问作者forest smoker