HTML怎么做下载进度条_html文件下载进度百分比条【代码详解】-html教程-PHP中文网

HTML本身无法实现下载进度条，必须用JavaScript通过fetch+ReadableStream或XMLHttpRequest监听流式响应并结合Content-Length响应头计算进度，服务端未返回该头时只能显示不确定状态。

html怎么做下载进度条_html文件下载进度百分比条【代码详解】

HTML本身无法实现下载进度条

浏览器原生的标签触发下载时，HTML 和 CSS 完全不可感知下载过程 —— 没有事件、没有回调、没有字节流暴露。所谓“HTML 做下载进度条”是个常见误解，实际必须借助 JavaScript + fetch（或 XMLHttpRequest）手动发起请求，并监听响应体的流式读取过程。

用 fetch + ReadableStream 实现可监控的下载

现代浏览器（Chrome 68+、Firefox 68+、Edge 79+）支持通过 response.body.getReader() 读取流，配合 Content-Length 响应头即可计算进度。关键点：

Content-Length 必须由服务端明确返回，否则无法预知总大小，只能显示“已接收 XX 字节”而无法换算百分比
必须使用 response.headers.get('content-length') 提前读取，不能等流读完才查
需将流分块读取（reader.read()），每次累加 chunk.value.length
避免直接调用 response.blob() 或 response.arrayBuffer() —— 它们不提供中间进度

简易示例（省略错误处理和兼容降级）：

async function downloadWithProgress(url, filename) {
  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>const chunks = [];
while (true) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
loaded += value.length;
if (total) {
const percent = Math.round((loaded / total) * 100);
updateProgress(percent); // 你自己的 DOM 更新函数
}
}</p><p>const blob = new Blob(chunks);
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = filename;
a.click();
URL.revokeObjectURL(a.href);
}</p>

IE 和旧版 Safari 怎么办？别硬撑，优雅降级

ReadableStream 在 IE 完全不支持，Safari 直到 15.4 才稳定支持流式读取。强行 polyfill 效果差、体积大、还可能破坏原有下载逻辑。更务实的做法是：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

用 navigator.userAgent 或 try/catch 检测 response.body 是否可用
不可用时，直接走传统，并隐藏进度条区域
不要试图用 XMLHttpRequest + progress 事件替代 —— 它只对同源请求有效，且无法处理跨域 Content-Length（需服务端配 Access-Control-Expose-Headers: Content-Length）

后端没返回 Content-Length 怎么办？别怪前端

常见于动态生成文件（如 PHP 的 readfile()、Node.js 的 res.sendFile() 默认不设长度）、或启用了 gzip 压缩但未预计算大小。此时前端无解 —— 浏览器根本收不到总字节数，response.headers.get('content-length') 返回 null。能做的只有：

让后端显式设置 Content-Length（例如 PHP 中先 filesize() 再 header()）
改用 Transfer-Encoding: chunked + 自定义响应头（如 X-Expected-Size），前端读 response.headers.get('x-expected-size')
接受现实：只显示“正在下载…”文字，或用不确定进度条（indeterminate）

最常被忽略的一点：即使代码写对了，只要服务端没配好响应头，进度条就永远卡在 0% —— 这不是前端 bug，是前后端协作断点。