download属性仅对同源url生效，跨域、data url或旧浏览器中会失效；建议显式指定安全文件名，并通过服务端设置content-disposition和cors头来增强兼容性。
download 属性只对同源 URL 生效
浏览器出于安全限制，download 属性仅在链接指向**同源资源**（即协议、域名、端口完全一致）时才真正触发下载；否则会直接跳转或打开，不会下载。这是最常被忽略的前提，很多开发者本地测试时用 file:// 协议，或链接到 CDN 上的图片/CSS/JS 文件，download 都会被静默忽略。
验证方式很简单：右键点击带 download 的链接 → “检查” → 查看控制台是否出现类似 Download is only permitted for same-origin URLs 的警告。
- ✅ 正确示例：
@#@#@#@#@#@#@#@#@#@0 - ❌ 无效示例：
@#@#@#@#@#@#@#@#@#@1（跨域，不下载） - ❌ 无效示例：
@#@#@#@#@#@#@#@#@#@2（Data URL，多数浏览器不支持download）
download 属性值不是必须的，但建议显式指定文件名
download 是布尔属性，写成 download 或 download="" 都表示启用下载行为；但若提供值（如 download="invoice.pdf"），浏览器会优先使用该值作为保存的默认文件名——这对用户友好，也避免后端返回的原始文件名含特殊字符或不直观。
注意：这个值**不经过路径解析**，不能包含 /、../ 等路径字符，否则整个属性会被浏览器忽略（部分浏览器会降级为无 download 行为）。
- ✅ 安全写法：
@#@#@#@#@#@#@#@#@#@3 - ❌ 危险写法：
@#@#@#@#@#@#@#@#@#@4（会被忽略，且有安全误导风险） - ⚠️ 注意：如果服务器响应头中设置了
Content-Disposition: attachment; filename="server-name.xlsx"，部分浏览器会优先采用响应头里的文件名，覆盖download值
不支持 download 的 fallback 方案怎么补
当目标资源跨域、是 Data URL、或运行在不支持 download 的旧浏览器（如 IE、iOS Safari ≤12.5）时，@#@#@#@#@#@#@#@#@#@5，无需 JS 干预。
真正难搞的是那些你无法控制响应头的第三方资源——这时候别硬刚 download，老实用 fetch + Blob + 用户引导更稳妥。
function downloadFromUrl(url, filename) {
fetch(url)
.then(r => r.blob())
.then(blob => {
const a = document.createElement('a');
const urlObj = URL.createObjectURL(blob);
a.href = urlObj;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(urlObj);
});
}
location /downloads/ {
add_header Content-Disposition "attachment";
add_header Access-Control-Allow-Origin "*";
}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
