如何让Chrome下载指示器在Actix_web流式传大文件时正常显示

问题本质分析 #

你的问题核心有两点：一是前端通过fetch接收响应时，会先将整个文件缓存到内存再触发保存，导致浏览器无法即时显示下载进度；二是后端错误使用Content-Range头，且未正确配置Content-Length（流式传输只要已知文件大小就可以设置该头）。

后端优化方案 #

1. 正确配置响应头 #

既然你已知文件总大小（3.7GB），流式传输完全可以搭配Content-Length头，Chrome需要这个值来计算总下载量并即时显示指示器。移除无效的Content-Range头，修正后的核心代码如下：

Ok(HttpResponse::Ok()
    .content_type("application/x-zip-compressed")
    .insert_header((header::CONTENT_LENGTH, file_size)) // 关键：添加已知的文件总大小
    .insert_header((header::CONTENT_DISPOSITION, format!("attachment; filename=\"USL.zip\"")))
    .streaming(my_data_stream))

2. 确保文件流实现正确 #

使用async_streams创建的流需保证是异步分块读取，actix_web的streaming方法会自动处理分块传输逻辑，无需额外配置，避免将整个文件加载到VM内存中。

前端优化方案（按需选择） #

方案1：直接让浏览器接管下载（最简单，无内存占用） #

如果下载请求不需要自定义请求头（如认证），直接用<a>标签触发下载，浏览器会直接处理请求，边接收文件边写入磁盘，即时显示下载指示器：

document.getElementById('download-btn').addEventListener('click', () => {
  const downloadLink = document.createElement('a');
  downloadLink.href = '/your-file-api-url'; // 替换为你的文件服务URL
  downloadLink.download = 'USL.zip';
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
});

方案2：带自定义请求头的流式下载（适合需要认证的场景） #

如果必须携带认证头或其他自定义头，使用fetch配合浏览器的ReadableStream和FileSystemAccess API，直接将响应流写入磁盘，避免内存缓存：

document.getElementById('download-btn').addEventListener('click', async () => {
  try {
    const response = await fetch('/your-file-api-url', {
      headers: {
        'Authorization': 'Bearer YOUR_AUTH_TOKEN' // 替换为你的认证头
      }
    });

    if (!response.ok) throw new Error(`请求失败：${response.status}`);

    // 让用户选择文件保存位置
    const fileHandle = await window.showSaveFilePicker({
      suggestedName: 'USL.zip',
      types: [{
        description: 'ZIP压缩文件',
        accept: {'application/x-zip-compressed': ['.zip']}
      }]
    });

    // 将响应流直接管道到磁盘可写流
    const writableStream = await fileHandle.createWritable();
    await response.body.pipeTo(writableStream);
    await writableStream.close();
  } catch (err) {
    console.error('下载出错:', err);
  }
});

总结 #

1. 后端必须设置Content-Length头（已知文件大小时），移除不必要的Content-Range头；
2. 前端避免将响应全部加载到内存，要么让浏览器直接处理下载请求，要么用流式API直接写入磁盘；
3. 该方案既满足VM的内存限制（后端不加载整个文件到内存），又能让Chrome即时显示下载指示器。

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