HTML下载文件按钮重命名失败？浏览器同源策略限制-html教程-PHP中文网

download属性失效99%因浏览器同源策略限制，仅对同源url生效；跨域需用fetch+blob或后端代理方案，并注意firefox对文件名扩展名的严格要求。

html下载文件按钮重命名失败？浏览器同源策略限制

download 属性重命名失败，99% 是浏览器同源策略在起作用，不是你代码写错了。

为什么 download 属性突然不生效

浏览器只对同源 URL 才尊重 download 属性。只要 href 的协议、域名或端口与当前页面不一致，该属性就被静默忽略——点击后跳转、预览、打开新页，就是不下载。

常见误判场景：http://localhost:3000 页面里写 href="https://cdn.example.com/report.pdf" → 失效
本地双击 HTML 文件（file:///path/to/index.html）→ 全部失效，download 彻底被禁用
开发时用 localhost，但资源走 127.0.0.1 或 127.0.0.1:3000 → 视为不同源，照样失效
控制台通常不报错，右键链接 → “另存为”弹不出对话框，基本可确认被忽略

文件名赋值的合法写法与 Firefox 陷阱

download 值不是“随便起个名”，它会被浏览器清洗、截断、补后缀，但 Firefox 特别较真：它要求你显式写出正确扩展名，否则可能退化为原始文件名甚至拒绝下载。

✅ 安全写法：download="invoice-2024.pdf"、download="用户数据.xlsx"（UTF-8 中文名现代浏览器已支持）
❌ 静默失效：download="./files/report.pdf"（含路径分隔符 /）、download="report:final.txt"（含冒号 :）、download=""（空值）
⚠️ Firefox 关键点：如果后端返回的是 application/json，你想存成 data.json，就必须写 download="data.json"；只写 download="data" 会失败

跨域下载必须用 fetch + Blob 方案

想从 CDN、S3、第三方 API 下载并精确重命名？<a download></a> 走不通，得用 JavaScript 把文件拉进内存再构造同源 URL。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

必须用 response.blob()，不能用 response.text()，否则 PDF、Excel 等二进制文件会损坏
服务端需支持 CORS，至少返回 Access-Control-Allow-Origin: * 或指定域名
记得配对调用 URL.revokeObjectURL(url)，否则长期运行会内存泄漏
iOS Safari 15.4+ 才稳定支持 URL.createObjectURL，旧版本可能失效
大文件（>100MB）慎用，容易卡顿或触发内存警告

关键代码片段：

const response = await fetch('https://cdn.example.com/data.zip');
const blob = await response.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'custom-name.zip';
a.click();
URL.revokeObjectURL(url);