download属性仅对同源url生效，跨域链接会被浏览器忽略而退化为跳转或预览；需确保协议、域名、端口完全一致，且服务端未返回content-disposition:inline响应头。

直接加 download 属性就能触发下载，但不是所有链接都管用——关键看资源是否同源，以及浏览器是否允许。

为什么点了 <a href="xxx"></a> 没反应？

常见现象：点击链接后跳转页面、打开新标签页，或控制台报错 Failed to download file: Not allowed to navigate top frame to data URL。根本原因不是写法错，而是浏览器策略限制：

• download 属性仅对同源 URL（即与当前页面同协议、同域名、同端口）生效；跨域链接即使加了 download，浏览器也会忽略该属性，退化为普通跳转
• data: 协议、blob: URL 默认不被 download 支持（Chrome 119+ 开始部分支持 blob:，但需配合 URL.createObjectURL() 动态创建）
• 某些服务器返回的响应头含 Content-Disposition: inline，会优先触发预览而非下载

download 属性怎么写才有效？

语法很简单，但必须搭配可下载的同源路径：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

<a href="/files/report.pdf" download="年度报告.pdf">下载PDF</a>

说明：

• href 必须是相对路径（如 /files/xxx）或完整同源 URL（如 https://yoursite.com/files/xxx），不能是 https://othersite.com/xxx
• download 的值是建议保存的文件名，不带值（download）时取 href 最后一段；带值时可自定义，但无法指定路径或扩展名校验
• 如果服务端返回的 Content-Type 是 text/html 或其他浏览器能直接渲染的类型，即使加了 download，部分浏览器仍可能忽略（尤其 Safari）

跨域文件怎么强制下载？

没有银弹，只能绕过同源限制：

• 后端加响应头：Access-Control-Allow-Origin: * + Content-Disposition: attachment; filename="xxx.jpg"，前端用 fetch 获取 blob，再用 URL.createObjectURL() 创建本地 URL 绑定到 <a download></a>
• 代理转发：把跨域请求走自己后端中转（如 /api/proxy?url=https%3A%2F%2Fremote.com%2Ffile.zip），确保返回的 URL 是同源的
• 避免用 download：改用 window.open(url) 或 iframe 触发下载（兼容性差，且现代浏览器常拦截）

真正容易被忽略的是服务端配置——哪怕 HTML 写对了，如果 Nginx/Apache 没配好 Content-Disposition 或 CORS，download 就只是个摆设。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！