download属性仅对同源url生效，跨域链接会被忽略；正确用法是同域静态资源、blob或data url，跨域需服务端配合content-disposition响应头或前端fetch转blob下载。
HTML 的 download 属性可以让 @#@#@#@#@#@#@#@#@#@0
<p>如果想自定义下载后的文件名，可以给 <code>download 赋值：
关键限制：仅对同源 URL 生效
download 属性只在以下情况起作用：
-
链接地址是同源的（即协议、域名、端口完全一致），例如：
/files/manual.pdf或./images/logo.png -
不能用于跨域资源，如
https://cdn.example.com/file.zip—— 浏览器会忽略download，直接跳转或预览 - 不支持 data URL 长内容（部分浏览器可能截断或失败），短的 base64 图片可尝试，但不稳定
绕过跨域限制的常用方法
若需下载第三方或 CDN 上的文件，需服务端配合：
-
后端代理接口：前端请求自己的服务器接口（如
/api/download?url=https://xxx.com/file.pdf），由后端发起 HTTP 请求获取文件流，再以Content-Disposition: attachment; filename="xxx.pdf"响应 -
生成 Blob URL（前端中转）：用
fetch获取跨域资源（需目标服务支持 CORS），转为 Blob，再创建临时 URL 并触发下载
示例（需目标资源开启 CORS）：
<script><br> async function downloadFromCDN() {<br> const res = await fetch('https://cdn.example.com/data.json');<br> const blob = await res.blob();<br> const url = URL.createObjectURL(blob);<br> const a = document.createElement('a');<br> a.href = url;<br> a.download = 'data.json';<br> a.click();<br> URL.revokeObjectURL(url);<br> }<br> </script>
常见失效原因和检查点
- 链接是外链且未同源 → 改用后端代理或确保 CORS + Blob 方案
- 服务器返回了
Content-Disposition: inline→ 后端需改为attachment - 文件类型被浏览器默认处理（如 .txt、.json 在 Chrome 中可能直接显示）→
download可覆盖，但前提是同源 - 使用了
target="_blank"或 JavaScript 阻止默认行为 → 会干扰download，应避免
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
