HTML添加下载链接方法详解

• ✅ 同源静态文件（如 /assets/report.pdf）能正常下载
• ❌ 跨域地址（如 https://cdn.example.com/data.csv）加了 download 也无效
• ❌ 后端接口（如 /api/export?format=xlsx）返回文件流时，download 不起作用，除非响应头带 Content-Disposition: attachment 且请求是同源的

怎么让非同源链接真正下载

绕过 download 限制的核心思路是：把远程文件内容拉到前端，再用 Blob + URL.createObjectURL() 构造本地 URL。

fetch('https://api.example.com/export.csv')
  .then(r => r.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'export.csv';
    a.click();
    URL.revokeObjectURL(url); // 用完记得释放
  });

download 属性的兼容性与细节陷阱

这个属性在 Chrome、Edge、Firefox（≥98）、Safari（≥15.4）中支持良好，但有几个关键细节常被忽略：

• 不支持 file:// 协议页面（本地双击 HTML 文件打开时，download 完全失效）
• download 的值只是建议文件名，浏览器可能忽略或截断特殊字符（如 /、..）
• 如果链接没有 href，或者 href 是 javascript:void(0) 这类伪协议，download 无效
• 在 iframe 中嵌入的页面若启用了 sandbox，且没加 allow-downloads，download 会被禁用

真正要稳，得看资源来源是否可控；不可控就老实用 fetch + Blob；别指望一个属性解决所有下载问题。

今天关于《HTML添加下载链接方法详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！