HTML的download属性仅对同源URL生效，跨域链接会忽略该属性直接跳转；解决方法是通过fetch获取远程文件并用Blob构造本地URL实现下载。
HTML 的 download 属性只对同源 URL 生效，跨域链接点下去会直接跳转或打开，不会触发下载。
为什么 download 属性有时没反应
最常见的情况是：你给一个指向 CDN、第三方图床或 API 接口的 <a></a> 标签加了 download，但浏览器默默忽略了它。这不是 bug，是安全限制——浏览器不允许前端脚本随意触发跨域资源下载，防止恶意站点诱导用户“下载”伪造文件。
- ✅ 同源静态文件（如
/assets/report.pdf）能正常下载 - ❌ 跨域地址（如
https://cdn.example.com/data.csv）加了download也无效 - ❌ 后端接口（如
/api/export?format=xlsx）返回文件流时，download不起作用，除非响应头带Content-Disposition: attachment且请求是同源的
怎么让非同源链接真正下载
绕过 download 限制的核心思路是：把远程文件内容拉到前端，再用 Blob + URL.createObjectURL() 构造本地 URL。
- 适合小文件（建议
- 必须后端允许 CORS（响应头含
Access-Control-Allow-Origin） - 请求要用
responseType: 'blob'，否则二进制数据会乱码 - 构造
<a></a>时仍需download属性，但此时 href 是 blob URL，属于同源
示例代码片段：
立即学习“前端免费学习笔记（深入）”；
fetch('https://api.example.com/export.csv')
.then(r => r.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'export.csv';
a.click();
URL.revokeObjectURL(url); // 用完记得释放
});
download 属性的兼容性与细节陷阱
这个属性在 Chrome、Edge、Firefox（≥98）、Safari（≥15.4）中支持良好，但有几个关键细节常被忽略：
- 不支持
file://协议页面（本地双击 HTML 文件打开时，download完全失效） -
download的值只是建议文件名，浏览器可能忽略或截断特殊字符（如/、..） - 如果链接没有
href，或者href是javascript:void(0)这类伪协议，download无效 - 在 iframe 中嵌入的页面若启用了
sandbox，且没加allow-downloads，download会被禁用
真正要稳，得看资源来源是否可控；不可控就老实用 fetch + Blob；别指望一个属性解决所有下载问题。
