

新闻资讯
技术学院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.c
reateObjectURL + 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); // 用完立即释放,避免内存泄漏
注意点:
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 或缺失该头Content-Type 不关键,Content-Disposition 才是开关最常被忽略的一点:前端加 download 属性 ≠ 下载成功;真正起作用的是服务端响应头,或者前端用 Blob + createObjectURL 主动构造可下载资源。跨域场景下,别浪费时间调试 download 属性,直接查响应头或换 Blob 方案。