HTML中A标签实现文件下载的几种方法

核心原因就一个：浏览器只允许同源 URL 触发下载。如果你的 href 指向跨域资源（比如 CDN 上的 PDF、S3 的图片），哪怕写了 download，点击后也会直接跳转或打开，而不是下载。

• 只有 href 是相对路径、blob: 协议或同源绝对路径时，download 才生效
• download 的值只是建议文件名，浏览器可能忽略（尤其当响应头含 Content-Disposition: inline）
• 某些旧版 Safari（iOS 10.3+ 才支持）和 IE 完全不支持该属性

如何让跨域链接真正触发下载

使用场景：CDN 图片、API 返回的 Excel 文件、第三方服务生成的 PDF 报表

const a = document.createElement('a');
fetch('https://cdn.example.com/report.xlsx')
  .then(r => r.blob())
  .then(blob => {
    a.href = URL.createObjectURL(blob);
    a.download = 'monthly-report.xlsx';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(a.href); // 及时释放内存
  });

download 属性在哪些情况下会被静默忽略

不是写了就一定起作用。浏览器会根据响应头、协议、MIME 类型综合判断是否允许下载。

• HTTP 响应头含 Content-Disposition: inline —— 浏览器优先展示而非下载
• href 是 data: URL 且过长（部分浏览器截断或拒绝解析）
• 目标资源 MIME 类型是浏览器可直接渲染的（如 text/html、image/png），且没有明确的 Content-Disposition: attachment
• 用户启用了“PDF 阅读器插件”或设置了“图片点击自动查看”，此时行为由客户端策略接管

移动端 iOS Safari 的特殊处理

iOS Safari 对 download 支持极弱：它既不支持跨域 download，也不支持通过 click() 触发 blob 下载（除非用户手动长按链接选“下载”）。

能做的有限但实用：

• 对纯静态资源（如官网的 PDF 下载页），用同源路径 + download，并确保服务器返回 Content-Disposition: attachment; filename="xxx.pdf"
• 避免依赖 JS 下载逻辑；如必须动态生成，考虑后端直出带签名的临时下载链接（302 跳转到同源 URL）
• 不要在 iOS 上尝试用 iframe 或 location.href 模拟下载 —— 大概率失败或白屏

真正难的不是写几行代码，而是得同时兼顾同源策略、CORS 配置、响应头控制、移动端兼容性，以及用户实际网络环境下的 fallback 行为。漏掉任意一环，下载就卡在“点了没反应”。

理论要掌握，实操不能落！以上关于《HTML中A标签实现文件下载的几种方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！