download属性仅对同源链接生效,跨域、Blob URL等场景会失效;真正可控的下载需用URL.createObjectURL配合a.download,或服务端设置Content-Disposition: attachment响应头。

download 属性本身不能强制下载,它只在同源 链接中生效;跨域、Blob URL、动态生成内容等场景下会静默失效。
为什么点击 有时只是打开而非下载
浏览器是否触发下载,取决于响应头 Content-Disposition 和资源同源性:
- 如果链接指向跨域资源(如
https://cdn.example.com/file.pdf),download属性被忽略,浏览器按 MIME 类型决定是预览还是下载 - 即使同源,若服务器返回
Content-Disposition: inline或未设置该头,PDF/图片等类型仍可能在标签页中打开 -
download对data:URL 和 Blob URL 仅在部分 Chrome 版本中支持,Firefox 完全不支持 Blob +download
真正可控的下载方式:用 URL.createObjectURL + a.download
适用于前端生成内容(如导出 CSV、截图、加密文件),绕过同源限制,且能指定文件名:
const blob = new Blob(['hello,world'], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'data.csv'; // 这里命名才真正生效
a.click();
URL.revokeObjectURL(url); // 用完立即释放,避免内存泄漏
注意点:
Delphi 7应用编程150例 CHM全书内容下载,全书主要通过150个实例,全面、深入地介绍了用Delphi 7开发应用程序的常用方法和技巧,主要讲解了用Delphi 7进行界面效果处理、图像处理、图形与多媒体开发、系统功能控制、文件处理、网络与数据库开发,以及组件应用等内容。这些实例简单实用、典型性强、功能突出,很多实例使用的技术稍加扩展可以解决同类问题。使用本书最好的方法是通过学习掌握实例中的技术或技巧,然后使用这些技术尝试实现更复杂的功能并应用到更多方面。本书主要针对具有一定Delphi基础知识
立即学习“前端免费学习笔记(深入)”;
- 必须在用户手势(如
click)中调用a.click(),否则会被浏览器拦截 -
URL.createObjectURL创建的是临时引用,不revoke会导致内存持续占用 - 不要把
blob直接赋给a.href(如a.href = blob),必须用createObjectURL
服务端配合才是稳定方案:设置正确的响应头
当链接指向真实后端接口(如 /api/export?format=csv),能否下载完全由服务端控制:
- 必须返回
Content-Disposition: attachment; filename="report.csv" - 避免返回
Content-Disposition: inline或缺失该头 - 对 PDF 等易被预览的类型,
Content-Type不关键,Content-Disposition才是开关 - Nginx / Apache 需额外配置才能透传或重写该头,否则可能被代理层覆盖
最常被忽略的一点:前端加 download 属性 ≠ 下载成功;真正起作用的是服务端响应头,或者前端用 Blob + createObjectURL 主动构造可下载资源。跨域场景下,别浪费时间调试 download 属性,直接查响应头或换 Blob 方案。









