download属性仅对同源url生效，跨域时浏览器忽略该属性；文件名需合法且显式带后缀，firefox尤其要求严格；跨域下载应采用fetch+blob或后端代理方案。
download 属性只对同源 URL 生效
跨域链接（比如 https://cdn.example.com/report.pdf 或公开 S3 地址）加上 download 属性，Chrome、Firefox、Edge 会直接忽略该属性，点击后跳转或打开文件，而非下载。这不是 bug，是浏览器强制执行的同源策略限制。
常见错误现象包括：页面跳转、PDF 在新标签页打开、控制台无报错但下载没触发。
- 静态资源尽量放同域名下，例如
/assets/export.csv - 本地开发用
file://协议时，download完全无效，必须起 HTTP 服务（如http://localhost:3000） - 若必须跨域，不能靠前端硬加
download解决，得换方案
文件名赋值的合法写法与陷阱
download 属性值仅作为建议文件名，浏览器会剥离路径、过滤非法字符，并自动补全扩展名（如你写 download="data"，而资源是 PDF，最终可能保存为 data.pdf）。
但这个“自动补全”不可靠，尤其在 Firefox 中：它要求你显式写出正确后缀，否则可能拒绝下载或退化为原始名。
- ✅ 合法：
download="invoice-202404.pdf"、download="用户报告.xlsx"（UTF-8 中文名现代浏览器已支持） - ❌ 静默失效：
download="./files/2024/invoice.pdf"（含/）、download="report:final.txt"（含:）、download=""（空值） - ⚠️ Firefox 特别注意：若后端返回的是
application/json，但你想存成.json，就必须写download="data.json"，不能只写download="data"
绕过同源限制的替代方案：fetch + Blob
当必须从跨域地址下载并精确控制文件名时，fetch 获取二进制数据、转为 Blob、再用 URL.createObjectURL 创建本地 blob URL 是目前最通用的前端方案。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
它不依赖同源，也不需要后端改头，但有内存和兼容性代价：
- Safari 全系不支持
download属性，但支持此方案（需注意URL.createObjectURL在 iOS Safari 15.4+ 才稳定） - 大文件（>100MB）可能触发内存警告或卡顿，不适合导出超大日志或视频
- 示例关键行：
const blob = await response.blob(); const url = URL.createObjectURL(blob); a.href = url; a.download = "custom-name.zip";
服务端配合才是生产环境的可靠解法
前端方案总有边界：Blob 内存压力、Safari 的 URL 失效风险、iOS 点击延迟等。真正可控、可审计、可追踪的下载行为，应该由后端代理完成。
核心是让前端请求一个同源路由（如 /api/download?file_id=abc123&name=report-v2.zip），后端取远端文件、设置标准响应头：
Content-Disposition: attachment; filename="report-v2.zip"Content-Type: application/zip- 同时校验权限、限流、记录日志
这个方式完全规避了前端所有兼容性问题，且 filename 支持 RFC 5987 编码（适配旧 IE），是 SaaS、电商、文档系统等场景的事实标准做法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
