JavaScript 中 Ajax 怎么实现文件下载并显示进度条-js教程-PHP中文网

javascript实现文件下载进度条的核心是使用xmlhttprequest（支持onprogress事件）或fetch+readablestream，需服务端返回content-length响应头，通过event.loaded/event.total计算百分比并实时更新ui。

javascript 中 ajax 怎么实现文件下载并显示进度条

JavaScript 中用 Ajax 实现文件下载并显示进度条，核心是使用 XMLHttpRequest（支持 onprogress 事件）或 fetch + ReadableStream（现代方案，但需手动解析进度），而不能用简单的 axios.get 或 fetch 直接触发浏览器下载（它们不暴露底层传输过程）。关键在于：**流式接收二进制数据 + 实时计算已接收字节数 / 总字节数**。

用 XMLHttpRequest 实现带进度的文件下载

这是最直接、兼容性好、能精确监听进度的方式。服务端需返回正确的 Content-Length 响应头，否则无法知道总大小。

创建 XMLHttpRequest 实例，设置 responseType = 'blob'
监听 onprogress 事件：从 event.loaded 和 event.total 计算百分比
监听 onload：收到完整响应后，用 URL.createObjectURL 创建临时链接并触发下载
注意：必须在 open() 后、send() 前设置 onprogress，且不能用 async: false

示例代码：

function downloadWithProgress(url, filename) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'blob';
<p>xhr.onprogress = function (e) {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
document.getElementById('progress-bar').style.width = percent + '%';
document.getElementById('progress-text').textContent = <code>${percent}%</code>;
}
};</p><p>xhr.onload = function () {
if (xhr.status === 200) {
const blob = new Blob([xhr.response], { type: xhr.getResponseHeader('content-type') });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = filename || 'download';
link.click();
URL.revokeObjectURL(link.href);
}
};</p><p>xhr.onerror = function () {
alert('下载失败');
};</p><p>xhr.send();
}</p>

用 fetch + ReadableStream 模拟进度（现代浏览器）

原生 fetch 不提供上传/下载进度事件，但可通过 ReadableStream.getReader() 分块读取响应体，结合 Content-Length 手动累计已读字节数来模拟进度。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

先发一次 HEAD 请求获取 Content-Length（或从 Response.headers 中读取，前提是服务端允许 CORS 暴露该 header）
再用 GET 获取流，用 reader.read() 循环读取 Uint8Array 块
每读一块就更新进度：当前累计字节数 ÷ 总字节数
最后将所有块合并为 Blob 并下载

⚠️ 注意：此方法在 Safari 等浏览器中对大文件可能有内存压力，且 Content-Length 在跨域时需服务端显式设置 Access-Control-Expose-Headers: Content-Length。

后端配合要点（不可忽略）

前端进度条能否准确显示，高度依赖服务端响应头配置：

必须返回 Content-Length（静态文件通常自动包含；动态生成如 Node.js/Express 需确保未启用 chunked transfer encoding）
跨域场景下，服务端需设置 Access-Control-Expose-Headers: Content-Length
推荐设置 Content-Disposition: attachment; filename="xxx.pdf"，便于前端默认提取文件名
避免使用重定向（302），因为 XMLHttpRequest 的 onprogress 在重定向后不会继续触发

常见问题与绕过限制的技巧

有些场景无法获取 Content-Length（如流式生成、代理转发、gzip 压缩未解压），此时只能显示「不确定进度」的动画（如旋转加载图标 + 已下载字节数）：

监听 onprogress 时若 !e.lengthComputable，可显示 已接收 ${e.loaded} 字节…
对于必须用 axios 的项目，可用 axios.get(url, { responseType: 'blob', onDownloadProgress: e => {...} })，它内部封装了 XMLHttpRequest
不要尝试用 iframe 或 <a download></a> 实现进度——它们完全不暴露下载过程