download属性在ie和safari中完全不支持，因webkit/trident内核未实现该特性；chrome/firefox仅支持同源url且受mime类型影响；跨域或预览型资源会失效；推荐fetch+blob+createobjecturl方案并配合服务端content-disposition响应头。
不可用。 IE 全系、Safari 全系（包括最新版）都不支持 download 属性，这不是版本问题，而是明确不实现该特性。
为什么 download 在 Safari 和 IE 中完全失效
这两个浏览器的内核（WebKit / Trident）从未将 download 属性纳入标准支持范围。即使你写成 @#@#@#@#@#@#@#@#@#@0，点击后 Safari 会直接在新标签页打开 PDF，IE 则可能触发下载（靠 MIME 类型和响应头），但绝不是靠 download 属性控制文件名或强制下载行为。
常见错误现象：
- Safari 点击链接后跳转到 PDF 页面，不下载
- IE 中
download属性被完全忽略，文件名由服务器响应头或 URL 路径决定 - Edge（旧版）虽曾短暂支持，但新版基于 Chromium 后已跟随 Chrome 行为，而 IE 模式下仍无支持
Chrome/Firefox 中 download 的实际限制
即便在支持它的浏览器中，download 也远非“点就下”：
- 仅对同源 URL 生效 ——
href必须与当前页面协议、域名、端口完全一致 - 跨域链接（哪怕只是
https://a.com→https://b.com）会退化为普通跳转 - 协议不同（
http→https）、端口不同（:80→:3000）、二级域名不同（api.example.com→www.example.com）均视为跨域 - 某些 PDF/MP4 等可预览资源，浏览器可能优先内建打开，
download会被忽略（除非服务端明确返回Content-Disposition: attachment）
绕过限制的可行方案：fetch + Blob + URL.createObjectURL
这是目前唯一能兼顾跨域、自定义文件名、且兼容 Safari/IE（需 polyfill）的通用路径：
- 用
fetch获取二进制数据（注意跨域需服务端配Access-Control-Allow-Origin） - 构造
Blob，再用URL.createObjectURL生成本地 blob URL - 创建临时
<a></a>元素，设href为 blob URL，download设为目标文件名，然后.click() - IE11 需降级使用
msSaveBlob；Safari 15.4+ 支持createObjectURL，但低版本需检测回退
示例关键片段：
fetch('/api/report.pdf')
.then(r => r.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'monthly-report.pdf';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
服务端配合才是稳定下载的关键
前端所有技巧都绕不开服务端响应头。真正可靠的下载依赖：
-
Content-Disposition: attachment; filename="xxx.pdf"—— 强制浏览器下载而非打开 -
Content-Type: application/octet-stream或精确类型（如application/pdf） - 跨域场景下必须带
Access-Control-Allow-Origin: *（或指定域名）和Access-Control-Allow-Headers: Range（大文件分片时） - 静态资源（如 Nginx）可通过配置
add_header Content-Disposition "attachment";统一处理
很多团队卡在前端方案上反复折腾，其实只要服务端加一行 header，Chrome/Firefox 就能正确下载，Safari/IE 也能靠传统跳转触发下载逻辑 —— 这比任何 JS 方案都更简单、更可靠。
