download属性仅对同源URL生效，跨域时被浏览器忽略；可行替代方案为fetch+Blob构造本地URL，或由服务端设置Content-Disposition响应头强制下载。
download 属性只对同源 URL 生效
浏览器出于安全限制，download 属性在跨域链接上会被忽略——哪怕你写了 <a href="https://example.com/file.pdf" download>，点击后依然会打开 PDF 而非下载。这是 Chrome、Edge、Firefox 的统一行为，不是 bug，是规范。
实操建议：
- 确保
href指向同源资源（比如/assets/report.xlsx或./data.json） - 如果文件在第三方 CDN 或 OSS（如阿里云 OSS、Cloudflare R2），需配置反向代理或加一层服务端路由，把请求代理到同源路径下
- 不要依赖前端拼接跨域 URL +
download来“强制下载”，它不会生效
blob URL + createObjectURL 是跨域下载的可行路径
当必须从跨域地址获取文件（比如 API 返回二进制流），就得绕过 a[download] 的限制，改用 Blob 构造本地 URL。
关键步骤：
立即学习“前端免费学习笔记（深入）”；
- 用
fetch()请求文件资源，注意服务端需允许 CORS（返回Access-Control-Allow-Origin: *或指定域名） - 调用
response.blob()获取 Blob 对象，再用URL.createObjectURL(blob)生成临时blob:链接 - 创建
<a>元素，设置href为该 blob URL，并加上download属性（此时有效） - 触发
.click()，之后记得调用URL.revokeObjectURL()清理内存
示例片段：
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.csv';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 别漏掉
});
服务端响应头比 download 属性更可靠
真正“强制下载”的控制权在服务端：Content-Disposition: attachment; filename="xxx" 响应头会覆盖浏览器默认行为，无论是否同源、是否用 <a> 标签，都会触发下载对话框。
常见场景与要点：
- Node.js（Express）：用
res.download(path)或手动设头res.set('Content-Disposition', 'attachment; filename="report.pdf"') - Nginx：对静态文件可配
add_header Content-Disposition "attachment";，但注意不能动态设 filename，需配合 map 或 Lua - PHP：用
header('Content-Disposition: attachment; filename="data.json");+readfile() - 若服务端无法修改，前端基本无解——
download属性不是万能开关，它只是个“提示”，浏览器听不听取决于来源和 MIME 类型
常见失效原因和调试方法
即使写了 download，也可能没反应，先排查这些：
- 控制台报错
Failed to execute 'click' on 'HTMLAnchorElement': The element is not in a document.→ 确保a已 append 到document.body再 click - 点击后跳转而非下载 → 检查
href是否为同源，且目标资源 MIME 类型不是浏览器可直接渲染的（如text/html、image/png通常会打开；application/octet-stream更可能下载） - Chrome 95+ 对 data URL 的
download支持不稳定 → 避免用data:application/pdf;base64,...+download，改用 blob URL - 移动端 Safari 不支持
download属性（任何情况）→ 必须走服务端响应头或 App 内 WebView 特定方案
最常被忽略的一点：没有验证服务端是否真的返回了预期文件内容。有时候链接 200 成功，但响应体是 HTML 错误页（比如 404 页面），浏览器就按 HTML 渲染了——别只看 Network 面板状态码，要点开 preview 或 response 看真实内容。
