download属性仅对同源的a标签生效，button等其他标签使用该属性会被浏览器静默忽略；跨域时需用fetch+Blob+createObjectURL方案或服务端设置Content-Disposition响应头。
download属性在标签里才有效，button不能直接用
很多人以为给 <button> 加 download 属性就能触发下载，其实浏览器完全忽略它——这个属性只对 <a> 标签生效。想让按钮“看起来像下载入口”，得用 <a> 套一层，或者用 JavaScript 模拟点击。
常见错误现象：<button download="report.pdf" href="https://www.php.cn/link/049ca0d6775e5b1f376269ac03826e81">下载</button> —— 点击毫无反应，控制台也没报错，只是属性被静默丢弃。
- 必须用
<a>标签，且需同时满足：有href（指向可访问的文件 URL）、有download属性 -
download的值是建议保存的文件名，不带路径；若省略，浏览器会尝试从href解析文件名 - 跨域资源（如 CDN 上的 PDF）无法用
download强制保存，浏览器会直接跳转或打开，这是安全限制
如何让按钮点击触发下载？用JavaScript模拟点击
当下载链接需要动态生成、权限校验或埋点统计时，不能写死 <a href="https://www.php.cn/link/601c6bc71c7480010b164805579ad343">，就得靠 JS 创建临时 <a> 并触发点击。
核心逻辑：构造带 href 和 download 的 <a> 元素 → 添加到 DOM → 调用 .click() → 立即移除（避免内存泄漏）。
立即学习“前端免费学习笔记（深入）”；
- 注意
href必须是同源 URL 或 Blob URL；如果是后端接口（如/api/export），不能直接设为href，否则可能跳转页面而不是下载 - 对于接口导出，应先
fetch获取 blob，再用URL.createObjectURL()创建本地 URL - 移动端 Safari 对自动点击限制更严，部分机型需用户手势触发后才能生效，所以一定要绑定在真实点击事件里
document.getElementById('downloadBtn').addEventListener('click', async () => {
const res = await fetch('/api/export?format=csv');
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'data.csv';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 及时释放
});
download属性失效的三个典型场景
即使用了正确的 <a> 标签，download 也可能不工作，多数是因为违反了浏览器策略。
-
跨域响应头缺失：如果
href是其他域名，服务端没返回Content-Disposition: attachment，且没加 CORS 头（Access-Control-Allow-Origin: *），Chrome 会拒绝下载并静默失败 -
MIME 类型不明确：服务器返回
text/plain或空类型时，某些浏览器（尤其是 Safari）会忽略download，改为在新标签页打开内容 -
文件路径含查询参数但没编码：比如
href="file.pdf?token=abc&name=test"，& 符号未转义会导致解析截断，最终下载名为file.pdf?token=abc，后半部分丢失
Blob 下载比 href 更可控，但要注意内存和兼容性
用 Blob + URL.createObjectURL() 是目前最可靠的前端下载方式，尤其适合动态生成内容（如导出表格、拼接图片）。
但它不是银弹：IE10+ 支持 Blob，但 createObjectURL 在 iOS Safari 14.5 之前有 bug，可能导致多次调用后崩溃；Android WebView 旧版本也不稳定。
- 每次调用
createObjectURL都会占用内存，必须配对调用revokeObjectURL，否则长期运行页面可能卡顿 - 不要把大文件（>100MB）全读进内存再转 Blob，应考虑流式处理或服务端直出
- 如果只是下载静态资源，优先用原生
<a download>，更轻量、无需 JS、SEO 友好
Content-Disposition，整个下载流程就退化成页面跳转。 
