ASP.NET Web Forms实现文件下载及进度条跟踪功能

你的问题出在Response.TransmitFile的工作机制上：这个方法会直接把文件交给IIS全权处理传输，ASP.NET服务器端没法实时获取已发送的字节数，也没法主动向客户端推送进度；同时浏览器默认的附件下载（Content-Disposition: attachment）会触发浏览器自带的下载框，前端JS根本没法监听这个过程的进度事件。

下面给你一套可行的实现方案：

方案：前端XHR监听进度 + 服务器端分块输出 #

1. 服务器端代码修改（替换原下载逻辑） #

把一次性传输改成分块读取文件并写入响应流，这样既能让客户端拿到完整的进度数据，也能避免大文件一次性加载到内存的问题。

try
{
    string filePath = MapPath(path);
    FileInfo file = new FileInfo(filePath);
    if (file.Exists)
    {
        Response.Clear();
        Response.ClearHeaders();
        Response.ClearContent();
        Response.AddHeader("Content-Disposition", "attachment; filename=\"" + file.Name + "\"");
        Response.AddHeader("Content-Length", file.Length.ToString());
        Response.ContentType = "application/octet-stream"; // 通用二进制文件类型

        const int bufferSize = 4096; // 按4KB大小分块传输，可根据文件大小调整
        byte[] buffer = new byte[bufferSize];
        
        using (FileStream fs = new FileStream(filePath, FileMode.Open, FileAccess.Read))
        {
            long bytesSent = 0;
            while (bytesSent < file.Length)
            {
                int bytesRead = fs.Read(buffer, 0, bufferSize);
                Response.OutputStream.Write(buffer, 0, bytesRead);
                Response.Flush(); // 立即发送当前块到客户端
                bytesSent += bytesRead;

                // 如果需要在服务器端记录进度（比如存Session），可以在这里处理
                // 但客户端进度主要靠前端XHR的progress事件获取
            }
        }
        Response.End();
    }
}
catch (Exception ex)
{
    // 自行处理错误，比如返回错误提示
}

2. 前端页面添加进度条和JS逻辑 #

必须用XMLHttpRequest（或Fetch）发起下载请求，才能监听进度事件，下载完成后再手动触发浏览器保存文件。

HTML部分

<div class="download-container">
    <progress id="downloadProgress" value="0" max="100"></progress>
    <span id="progressText">0%</span>
    <button onclick="startDownload()">开始下载</button>
</div>

JavaScript部分

function startDownload() {
    const xhr = new XMLHttpRequest();
    const progressBar = document.getElementById('downloadProgress');
    const progressText = document.getElementById('progressText');
    
    // 替换成你的下载页面路径，记得传递正确的文件参数
    xhr.open('GET', 'Download.aspx?path=your/file/path.mp4', true);
    xhr.responseType = 'blob'; // 以二进制Blob形式接收响应

    // 监听下载进度
    xhr.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
            const percent = (e.loaded / e.total) * 100;
            progressBar.value = percent;
            progressText.textContent = Math.round(percent) + '%';
        }
    });

    // 下载完成后触发浏览器保存文件
    xhr.addEventListener('load', function() {
        if (xhr.status === 200) {
            const blob = new Blob([xhr.response], { type: xhr.getResponseHeader('Content-Type') });
            const downloadUrl = URL.createObjectURL(blob);
            const link = document.createElement('a');
            
            // 从响应头中获取文件名
            const disposition = xhr.getResponseHeader('Content-Disposition');
            const filename = disposition.split('filename=')[1].replace(/"/g, '');
            
            link.href = downloadUrl;
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            
            // 清理资源
            document.body.removeChild(link);
            URL.revokeObjectURL(downloadUrl);
            
            // 重置进度条
            progressBar.value = 0;
            progressText.textContent = '0%';
        }
    });

    // 发送请求
    xhr.send();
}

注意事项 #

• 分块大小可以调整：如果是超大文件（比如几GB），可以把bufferSize调大到8KB或16KB，减少IO次数。
• 跨域问题：如果前端和下载接口不在同一域名，需要配置CORS，但Web Forms里一般是同域，所以不用太担心。
• 浏览器兼容性：现代浏览器都支持XHR的progress事件和Blob API，不用考虑老旧IE的话可以直接用。

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