download属性仅对同源URL生效，跨域链接会被忽略；正确用法是同域静态资源、Blob或data URL，跨域需服务端配合Content-Disposition响应头或前端fetch转Blob下载。
HTML 的 download 属性可以让 <a> 标签点击时强制下载文件，而不是在浏览器中打开或预览（比如 PDF、图片、文本等）。但它的生效有明确限制，不是所有链接都适用。
download 属性的基本用法
给超链接加上 download 属性即可：
如果想自定义下载后的文件名，可以给 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）：
<button onclick="downloadFromCDN()">下载 CDN 文件</button><script>
async function downloadFromCDN() {
const res = await fetch('https://cdn.example.com/data.json');
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'data.json';
a.click();
URL.revokeObjectURL(url);
}
</script>
常见失效原因和检查点
- 链接是外链且未同源 → 改用后端代理或确保 CORS + Blob 方案
- 服务器返回了
Content-Disposition: inline→ 后端需改为attachment - 文件类型被浏览器默认处理（如 .txt、.json 在 Chrome 中可能直接显示）→
download可覆盖，但前提是同源 - 使用了
target="_blank"或 JavaScript 阻止默认行为 → 会干扰download，应避免
