根本原因是浏览器仅对同源URL启用download属性，跨域、file://协议或服务端返回Content-Disposition:inline时该属性被忽略；Safari不支持Blob/data URL下载，Chrome动态创建a标签需先设href再设download；全平台兼容的文件名控制依赖服务端Content-Disposition响应头。
download 属性为什么点了还是跳转或预览
根本原因就一个：浏览器只对同源 URL（协议、域名、端口三者完全一致）的 <a> 链接启用 download 属性。只要 href 是跨域地址（比如 https://cdn.example.com/file.pdf）、file:// 协议，或服务端返回了 Content-Disposition: inline，该属性就会被静默忽略——点击后行为退化为默认处理（跳转、新标签页打开、或内嵌预览）。
常见误判点：
-
download=""或download="true"不生效；必须写合法文件名，如download="report.pdf" - 在 Safari（尤其是 iOS 全系）中，
download对任何 Blob 或 data URL 都不触发下载，仅限同源静态资源且需用户真实点击 - Chrome/Edge 中动态创建
<a>时，若先设download再设href，部分版本会丢弃该属性
同源静态文件怎么写才真正强制下载
适用场景：你控制着文件托管位置，且能保证链接与当前页面同源（例如都部署在 https://yourapp.com 下）。
正确写法要点：
立即学习“前端免费学习笔记（深入）”；
-
href必须是相对路径或完整同源绝对路径，如/assets/data.csv或https://yourapp.com/files/invoice.pdf -
download值建议显式指定，避免依赖 URL 解析（尤其当 URL 含查询参数时）：<a href="/api/export?id=123" download="invoice-123.pdf">下载</a> - 确保服务端响应头没设
Content-Disposition: inline；若返回text/html类型，即使同源也可能跳转而非下载 - 不要加
target="_blank"或onclick="event.preventDefault()"，会干扰download行为
跨域或 API 接口返回流，必须用 fetch + Blob
这是最常踩坑的环节：把 download 直接挂在 href="https://api.example.com/export" 上，永远无效。必须由前端接管响应体，构造一个“浏览器认定为同源”的临时 URL。
关键实操步骤：
- 接口需支持 CORS（响应头含
Access-Control-Allow-Origin），否则fetch直接失败 - 用
response.blob()而非response.text()，保障二进制安全（尤其 PDF、Excel） -
URL.createObjectURL(blob)生成的 URL 天然同源，download在此处 100% 生效 - 必须调用
URL.revokeObjectURL(url)清理，否则每下载一次就内存泄漏一次 - 大文件（>50MB）慎用此法；iOS Safari 不支持脚本触发
a.click()，需降级提示用户长按保存
最小可行代码：
fetch('/api/export?format=csv')
.then(r => r.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'export-' + Date.now() + '.csv';
a.click();
URL.revokeObjectURL(url);
});
真正可靠的重命名，靠服务端 Content-Disposition
前端 download 属性只是“尽力而为”的语义提示，实际文件名最终由服务端响应头决定。只要服务端返回：
Content-Disposition: attachment; filename="财务报表-2024.xlsx"
无论链接是否跨域、浏览器是 Safari 还是 IE，都会强制使用该名称保存。这是唯一全平台兼容的方案。
后端设置示例（Express）：
res.setHeader('Content-Disposition', 'attachment; filename="report.pdf"');
res.setHeader('Content-Type', 'application/pdf');
res.sendFile(path.join(__dirname, 'files', 'report.pdf'));
注意点：
- 如果服务端已设
Content-Disposition，前端download属性会被多数浏览器忽略 - 中文文件名在旧版 Safari 可能变成
download.bin，需服务端用 RFC 5987 编码（如filename*=UTF-8''%E8%B4%A2%E5%8A%A1.pdf） - 这个头必须和实际文件内容类型匹配，否则可能被浏览器截断或拒收
复杂点在于：很多团队以为前端加个 download 就万事大吉，结果在 Safari 或跨域场景下集体失效。真正要稳，得前后端配合——要么全同源静态链路，要么服务端扛起 Content-Disposition，要么前端用 Blob 方案兜底并处理好内存和兼容性。
