download属性失效99%因浏览器同源策略限制，仅对同源URL生效；跨域需用fetch+Blob或后端代理方案，并注意Firefox对文件名扩展名的严格要求。
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> 走不通，得用 JavaScript 把文件拉进内存再构造同源 URL。
立即学习“前端免费学习笔记（深入）”；
- 必须用
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);
生产环境推荐后端代理方案
前端方案总有边界：Blob 内存压力、iOS Safari 兼容性、点击延迟、无下载进度反馈。真正可控的下载，应该由后端兜底。
- 前端请求一个同源路由，例如
/api/download?file_id=abc123&name=report-v2.pdf - 后端取远端资源，设置标准响应头：
Content-Disposition: attachment; filename="report-v2.pdf" - 这样既绕过同源限制，又规避了前端内存和兼容性问题，还能加鉴权、审计、限流
跨域下载不是“加个 download 就完事”的事，它本质是安全边界与用户体验之间的权衡——你得清楚哪一层该由谁来负责。
