ASP.NET Core流式文件至Chrome无无限下载进度动画问题

问题描述 #

我有一个ASP.NET Core端点，用于流式传输动态生成的未知大小文件，代码如下：

public async Task<IActionResult> ExportAsync(CancellationToken cancellationToken = default)
{
    Response.Headers.Append("X-Content-Type-Options", "nosniff");
    Response.Headers.Append("Cache-Control", "no-cache, no-store, must-revalidate");
    Response.Headers.Append("Pragma", "no-cache");
    Response.Headers.Append("Expires", "0");
    Response.ContentType = "application/zip";
    Response.Headers.Append("Content-Disposition", "attachment; filename=\"file.zip\"");

    PipeWriter outStream = HttpContext.Response.BodyWriter;
    
    byte[] buffer = new byte[100];
    ReadOnlyMemory<byte> source = new ReadOnlyMemory<byte>(buffer);
    for (int i = 0; i < 100; i++)
    {
        await outStream.WriteAsync(source, cancellationToken);
        await outStream.FlushAsync(cancellationToken);
        await Task.Delay(100, cancellationToken);
    }

    return new EmptyResult();
}

该端点可正常将文件流式传输至浏览器，但Chrome直到文件全部下载完成后才会显示进度。已知未发送Content-Length时无法显示精确进度，但至少应该显示表示正在下载的无限动画。通过Chrome开发者工具可确认文件正在流式传输，Chrome也能识别到该流，且使用的是HTTP2协议。

原因分析与解决方案 #

1. Chrome的缓存触发阈值 #

Chrome对小体积的流式下载会先缓存数据，直到累积到一定大小（通常几KB）才会触发下载进度UI更新。你的代码每次仅写入100字节，加上100ms的延迟，数据传输速度过慢，Chrome会一直缓存到全部数据接收完成才显示进度。

2. 调整传输参数 #

增大单次写入的缓冲区大小，同时缩短延迟时间，让数据更快达到Chrome的进度触发阈值：

byte[] buffer = new byte[4096]; // 改用4KB缓冲区
ReadOnlyMemory<byte> source = new ReadOnlyMemory<byte>(buffer);
for (int i = 0; i < 100; i++)
{
    await outStream.WriteAsync(source, cancellationToken);
    await outStream.FlushAsync(cancellationToken);
    await Task.Delay(10, cancellationToken); // 缩短延迟
}

3. 确认分块传输状态 #

ASP.NET Core在未设置Content-Length时默认启用分块传输（Transfer-Encoding: chunked），可显式设置响应头确认：

Response.Headers.Append("Transfer-Encoding", "chunked");

注：HTTP/2协议会忽略Transfer-Encoding头，但调整数据传输量仍是触发进度动画的核心。

4. 排除服务器端缓冲干扰 #

确认服务器或代理未开启响应缓冲，ASP.NET Core默认在流式场景下不会缓冲响应，若有自定义中间件需检查是否存在缓冲逻辑。

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