download属性仅在同源、非file://协议且资源为非渲染型MIME类型时可靠生效；跨域、file://协议、浏览器可预览的资源或服务端未设Content-Disposition均会导致其静默失效。
直接说结论：download 属性只在同源、非 file:// 协议、且目标资源可被浏览器直接获取（非渲染型 MIME 类型）时才可靠生效。跨域、协议不同、本地双击打开 HTML 文件，都会让它静默失效。
为什么 download 属性经常“点了没反应”或“名字没改”
这不是你代码写错了，而是浏览器主动忽略它：
-
href指向跨域地址（哪怕只是httpvshttps、www.a.comvsa.com）→ Chrome/Firefox 直接无视download - 页面用
file://打开 → 所有现代浏览器都认为这是不安全上下文，download无效 - 目标是图片、PDF、TXT 等浏览器能预览的类型 → 部分版本 Safari 或移动端 WebView 会优先打开而非下载
- 服务端返回了
Content-Type: text/html或未设Content-Disposition→ 浏览器当网页渲染，根本不会触发下载逻辑
用 fetch + Blob 构造同源临时链接
这是目前最通用、兼容性最好的前端方案，本质是把远程文件“拉回来”，再当成自己域名下的资源触发下载：
function downloadFile(url, filename) {
fetch(url)
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.blob();
})
.then(blob => {
const blobUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = blobUrl;
a.download = filename;
a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(blobUrl); // 必须清理，否则内存泄漏
})
.catch(err => console.error('下载失败:', err));
}
注意点：
立即学习“前端免费学习笔记（深入）”；
- 大文件慎用：整个文件走 JS 内存，可能卡顿甚至 OOM；10MB 以内较稳妥
-
filename要带后缀（如"report.pdf"），否则下载后可能无扩展名 - 如果服务端接口需要鉴权（如带
Authorizationheader），fetch 要显式传入：fetch(url, { credentials: 'include' })
服务端配合：让直链下载也能重命名
如果你控制得了后端，这才是更轻量、更健壮的解法——不用前端拉完整文件：
- 响应头必须包含：
Content-Disposition: attachment; filename="desired-name.pdf" - 跨域请求时，还需加：
Access-Control-Allow-Origin: *和Access-Control-Expose-Headers: Content-Disposition - 避免设置
Content-Type: text/html；对 PDF/Excel 等，用标准 MIME 类型（如application/pdf） - 文件名含中文？建议用 ASCII 名，或按 RFC 5987 编码（如
filename*=UTF-8''%E6%8A%A5%E5%91%8A.pdf），Chrome 对 Unicode 支持已变弱
真正容易被忽略的是：即使你写了 download="xxx.pdf"，只要服务端没配 Content-Disposition，或者前端没处理跨域，浏览器就只认服务端给的文件名——而这个值往往来自 URL 路径，比如 /files/abc123.pdf 就变成 abc123.pdf，和你的 download 值完全无关。
