IE和Safari中download属性可用吗？跨浏览器下载限制详解

`download`属性在IE和Safari中完全不被支持，Chrome与Firefox虽支持但仅限同源URL且易受MIME类型和资源预览行为干扰；跨域、协议或域名差异均会导致失效，而真正稳定可靠的下载体验必须依赖服务端配合`Content-Disposition: attachment`响应头——前端`fetch + Blob + createObjectURL`方案虽可绕过部分限制并兼容老旧浏览器，但终究是权宜之计，一行正确的服务端配置往往比复杂JS逻辑更简单、更有效。

不可用。 IE 全系、Safari 全系（包括最新版）都不支持 download 属性，这不是版本问题，而是明确不实现该特性。

为什么 download 在 Safari 和 IE 中完全失效

这两个浏览器的内核（WebKit / Trident）从未将 download 属性纳入标准支持范围。即使你写成 下载，点击后 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
• 创建临时 元素，设 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);
  });