JavaScript 怎么处理后端接口返回的二进制文件流下载进度-js教程-PHP中文网

javascript无法直接监听blob/arraybuffer下载进度，需用fetch+readablestream流式读取并结合content-length计算进度，或用xhr（限制多），且依赖后端正确设置content-length、禁用gzip、暴露响应头。

javascript 怎么处理后端接口返回的二进制文件流下载进度

JavaScript 本身不能直接监听后端返回的二进制文件流下载进度（比如 responseType: 'blob' 或 'arraybuffer'），因为浏览器在收到完整响应前不会触发 onload，而 onprogress 在大多数情况下对非流式响应无效。真正能获取实时下载进度的方式，是使用 Fetch API 配合 ReadableStream + 进度计算，前提是后端支持分块传输（Transfer-Encoding: chunked）并正确设置 Content-Length（或至少不隐藏它）。

1. 使用 Fetch + Response.body 流式读取（推荐）

这是目前最可靠、可精确计算下载进度的方式，适用于现代浏览器（Chrome 68+、Firefox 65+、Edge 79+）：

用 fetch() 发起请求，不设 responseType，保持默认（即流式响应）
通过 response.body.getReader() 获取流读取器
每次 reader.read() 返回一个 { done, value }，value 是 Uint8Array，长度即本次接收字节数
累加已读字节数，除以 response.headers.get('content-length') 得到进度百分比（若服务端返回了该 header）

示例代码：

async function downloadWithProgress(url) {
  const response = await fetch(url);
  const contentLength = response.headers.get('content-length');
  const total = contentLength ? parseInt(contentLength, 10) : null;
  const reader = response.body.getReader();
  let loaded = 0;
<p>while (true) {
const { done, value } = await reader.read();
if (done) break;
loaded += value.length;</p><pre class="brush:php;toolbar:false;">const progress = total ? Math.round((loaded / total) * 100) : null;
console.log(`下载中：${loaded} / ${total || '未知'} 字节 (${progress}%)`);

}

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

reader.releaseLock(); }

2. 使用 XMLHttpRequest（兼容旧版，但限制多）

XHR 的 onprogress 事件仅在响应头包含 Content-Length 且浏览器支持时才有效；对 blob/arraybuffer 响应类型，event.loaded 和 event.total 可能为 0 或不准确：

必须设置 xhr.responseType = 'arraybuffer'（不能是 'blob'，否则部分浏览器不触发 progress）
需在 open() 后、send() 前监听 onprogress
仅当服务端明确返回 Content-Length，event.total 才有意义
注意：Safari 对 arraybuffer + progress 支持不稳定，建议降级为流式 fetch

3. 后端配合要点（关键！）

前端能否拿到进度，一半取决于后端配置：

务必设置 Content-Length 响应头（静态文件或已知大小时最稳妥）
如为动态生成文件（如 ZIP、PDF 导出），尽量预估或分块输出，并启用 Transfer-Encoding: chunked
避免使用 gzip 压缩（会干扰 Content-Length 和流读取逻辑），或确保解压由前端完成（复杂且不推荐）
跨域请求需确保 Access-Control-Expose-Headers: Content-Length

4. 进度 UI 更新与 Blob 构造（完成后）

流式读取结束后，需把所有 Uint8Array 合并为完整数据，再转成 Blob 并触发下载：

用 new Uint8Array(totalSize) 预分配，或用 Uint8Array.from(chunks.flat()) 拼接（小文件）
构造 new Blob([uint8Array], { type: response.headers.get('content-type') || 'application/octet-stream' })
用 URL.createObjectURL(blob) 创建临时链接并模拟点击下载

注意：不要在流读取过程中频繁创建 Blob，否则影响性能。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南