download属性仅对同源a标签生效，跨域时被忽略；Safari完全禁用跨域download；空download值依赖URL路径推导文件名，query参数导致无扩展名；Content-Disposition:inline会覆盖download；解决方案包括fetch+Blob+createObjectURL或服务端直接设置Content-Disposition:attachment。
为什么直接加 download 属性不一定能下载
浏览器只允许 download 属性对同源（same-origin）的 a 标签生效；跨域链接（比如指向 CDN 或 S3 的 URL）加上 download 会被忽略，点击后仍是跳转或新标签页打开，而非下载。
- Chrome、Edge 支持
download，但 Safari 对跨域资源完全禁用该行为 -
download值为空时，浏览器会尝试从 URL 路径推导文件名（如/file.pdf→file.pdf），但若 URL 是 query 参数形式（?id=123），就可能变成无扩展名的unknown - 服务器返回的
Content-Disposition: inline也会覆盖download行为
用 JavaScript 触发 Blob 下载解决跨域问题
当目标资源跨域或需动态生成内容时，得走 fetch + Blob + URL.createObjectURL 这条链路。核心不是“伪装”，而是真正触发浏览器下载流程。
- 先
fetch获取资源（注意：跨域需服务端配Access-Control-Allow-Origin，否则请求直接被拦） - 用响应体生成
Blob，指定type（如"application/pdf"）避免类型推断错误 - 调用
URL.createObjectURL(blob)得到临时 blob URL，再用document.createElement('a')绑定href和download - 必须手动
a.click()，且不能在异步回调外提前销毁 blob URL（否则 Chrome 可能下载空文件）
fetch('/api/report.pdf')
.then(r => r.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'report-2024.pdf'; // 显式指定文件名更可靠
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 用完立刻释放，避免内存泄漏
});
如何让按钮视觉上像原生下载控件
纯样式问题，和下载逻辑解耦。重点是交互反馈和可访问性，不是套个 class 就完事。
- 给
a加role="button"和tabindex="0"，让它能键盘聚焦并回车触发 - 用
:active或 JS 添加is-downloading类，配合 loading 动画（比如禁用状态 + 旋转图标） - 不要只靠颜色区分状态——下载中应同时禁用
pointer-events并设aria-busy="true" - 如果按钮文字是“下载”，别写成
<a href="#">下载</a>，空href会跳顶，改用href="javascript:void(0)"或干脆用button标签 + JS 绑定
服务端配合才是最省事的方案
前端折腾半天不如后端一行 header。只要资源由你控制的接口返回，直接让服务端设置 Content-Disposition: attachment; filename="xxx.pdf"，浏览器就会强制下载，连 download 属性都不用加。
立即学习“前端免费学习笔记（深入）”；
- Node.js Express 示例：
res.setHeader('Content-Disposition', 'attachment; filename="data.csv"'); - PHP：
header('Content-Disposition: attachment; filename="export.json"'); - 这个方案绕过所有前端兼容性问题，且支持任意文件名（含中文、空格），比前端拼 URL 安全得多
- 唯一代价是多一次请求——但用户感知不到，且比跨域 fetch 更稳定
真要“伪装”，其实是把下载动作藏在语义清晰的交互里：按钮文案写清楚用途，加载态不消失直到文件开始下载，失败时给出具体原因（比如“网络错误”而不是“下载失败”）。这些细节比加个 download 属性重要得多。
