核心原因是浏览器仅允许同源url触发download属性下载；跨域资源即使添加download也会被忽略，需通过fetch获取blob再创建本地url实现下载。
为什么 <a></a> 标签加了 download 属性却没反应
核心原因就一个：浏览器只允许同源 URL 触发下载。如果你的 href 指向跨域资源（比如 CDN 上的 PDF、S3 的图片），哪怕写了 download，点击后也会直接跳转或打开，而不是下载。
常见错误现象：
– 点击链接后在新标签页打开了文件
– 控制台没报错，但 download 属性被忽略
– 用开发者工具检查，发现渲染后的 <a></a> 标签里 download 属性消失了
- 只有
href是相对路径、blob:协议或同源绝对路径时，download才生效 -
download的值只是建议文件名，浏览器可能忽略（尤其当响应头含Content-Disposition: inline） - 某些旧版 Safari（iOS 10.3+ 才支持）和 IE 完全不支持该属性
如何让跨域链接真正触发下载
不能靠 <a download></a> 硬来，得把资源“拉回来”再构造本地 blob。本质是绕过同源限制，用 JS 获取内容、生成 Blob、再用 URL.createObjectURL() 创建可下载的本地地址。
使用场景：CDN 图片、API 返回的 Excel 文件、第三方服务生成的 PDF 报表
立即学习“前端免费学习笔记（深入）”；
- 先用
fetch()获取资源（注意服务端需允许 CORS，即响应头含Access-Control-Allow-Origin） - 调用
response.blob()得到二进制数据，避免转成文本破坏格式 - 用
URL.createObjectURL(blob)创建临时 URL，赋给<a href></a> - 必须手动触发
a.click()，且元素需已挂载到 DOM（可append到body后立即移除）
示例关键片段：
const a = document.createElement('a');
fetch('https://cdn.example.com/report.xlsx')
.then(r => r.blob())
.then(blob => {
a.href = URL.createObjectURL(blob);
a.download = 'monthly-report.xlsx';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(a.href); // 及时释放内存
});
download 属性在哪些情况下会被静默忽略
不是写了就一定起作用。浏览器会根据响应头、协议、MIME 类型综合判断是否允许下载。
- HTTP 响应头含
Content-Disposition: inline—— 浏览器优先展示而非下载 -
href是data:URL 且过长（部分浏览器截断或拒绝解析） - 目标资源 MIME 类型是浏览器可直接渲染的（如
text/html、image/png），且没有明确的Content-Disposition: attachment - 用户启用了“PDF 阅读器插件”或设置了“图片点击自动查看”，此时行为由客户端策略接管
移动端 iOS Safari 的特殊处理
iOS Safari 对 download 支持极弱：它既不支持跨域 download，也不支持通过 click() 触发 blob 下载（除非用户手动长按链接选“下载”）。
能做的有限但实用：
- 对纯静态资源（如官网的 PDF 下载页），用同源路径 +
download，并确保服务器返回Content-Disposition: attachment; filename="xxx.pdf" - 避免依赖 JS 下载逻辑；如必须动态生成，考虑后端直出带签名的临时下载链接（302 跳转到同源 URL）
- 不要在 iOS 上尝试用
iframe或location.href模拟下载 —— 大概率失败或白屏
真正难的不是写几行代码，而是得同时兼顾同源策略、CORS 配置、响应头控制、移动端兼容性，以及用户实际网络环境下的 fallback 行为。漏掉任意一环，下载就卡在“点了没反应”。
