download属性仅对同源URL生效，跨域或file://协议下被浏览器静默忽略；必须用于标签且href有效，文件名需合法无路径字符，Safari全系不支持，服务端Content-Disposition响应头优先级更高。
检查 href 是否跨域或协议非法
download 属性只对同源 URL 生效，跨域链接（哪怕只是 CDN 域名不同，如 https://yoursite.com 页面里写了 href="https://cdn.yoursite.com/file.pdf"）会被浏览器静默忽略。控制台会出现警告：download attribute has no effect on cross-origin links。
file:// 协议下所有 download 都失效——这不是 bug，是浏览器强制限制。本地开发必须起 HTTP 服务，比如用 npx serve 或 python3 -m http.server。
- ✅ 合法：href="/assets/report.xlsx"、href="./data.json"、href="https://yoursite.com/files/log.zip"（协议、域名、端口三者完全一致）
- ❌ 失效：href="https://cdn.example.com/xxx.pdf"、href="file:///Users/me/index.html"、href="javascript:void(0)"、href="#"
确认是否用在 <a> 标签上且 href 可访问
download 是 <a> 标签专属属性，加在 <button>、<div> 上完全无效。同时 href 必须指向一个真实可获取的资源地址，空值、伪协议、锚点都会导致无响应。
常见错误：<button download="log.txt">下载</button> → 属性被忽略；<a href="#" download="data.csv">导出</a> → 点击只滚动，不发请求，download 形同虚设。
立即学习“前端免费学习笔记（深入）”；
- 确保标签是
<a>，且 href 不为空、不为 #、不为 javascript:xxx - 点击前可用开发者工具 Network 面板验证该 href 是否真能发起请求并返回 200
- 若 href 指向后端接口（如
/api/export?format=csv），需确认接口返回的是文件流而非 HTML 页面
验证 download 属性值是否合法
download 属性值只作为建议文件名，但含非法字符会直接导致整个属性失效。浏览器会忽略路径分隔符（/、\）、冒号（:）、星号等，且空值或仅含空白也会退化为默认名。
Firefox 尤其严格：如果后端返回 Content-Type: application/json，但你只写 download="data"，它可能拒绝下载或保存为 data（无后缀），而写成 download="data.json" 才可靠。
- ✅ 安全写法：
download="invoice-202408.pdf"、download="用户报告.xlsx"（UTF-8 中文名现代浏览器支持） - ❌ 静默失效：
download="./export/2024/invoice.pdf"、download="report:final.csv"、download="" - ⚠️ 注意：Safari 全系（含 iOS/iPadOS）不支持 download 属性，无论值怎么写，点同源链接也只会预览
判断是否被服务端响应头覆盖
最终文件名和是否下载，由服务端 Content-Disposition 响应头优先决定。如果后端返回 Content-Disposition: inline; filename="preview.pdf"，浏览器就强行预览，download 属性完全无效。
真正触发下载的响应头应为：Content-Disposition: attachment; filename="export.csv"。这个头比前端 download 属性权重更高，且不受同源限制——只要请求能发出，头生效，就能下载。
- 用开发者工具 Network 面板查看响应头，确认是否存在
Content-Disposition，以及值是否为attachment - 如果后端无法改头，又必须跨域下载，只能走 fetch + Blob 方案：fetch 获取二进制 →
response.blob()→URL.createObjectURL()→ 动态创建<a>并 click - 注意大文件（>100MB）用 Blob 方案易卡顿或 OOM；iOS Safari 15.4+ 才稳定支持
URL.createObjectURL，旧版需降级为 data URL
