download属性仅对同源url生效，跨域时被浏览器静默忽略而退化为跳转；file://协议下完全失效，须用http服务；动态或跨域文件需fetch+blob方案，ios safari则必须依赖服务端content-disposition响应头。
download 属性只对同源 URL 生效
点击链接触发下载，靠的是 download 属性，但它有个硬性限制：目标 URL 必须与当前页面同源（协议、域名、端口完全一致），否则浏览器会忽略该属性，退化为普通跳转或打开新页面。
常见错误现象：@#@#@#@#@#@#@#@#@#@0 点击后不下载，而是直接在新标签页打开 PDF —— 这是因为跨域，download 被静默丢弃。
- 同源示例可行：
@#@#@#@#@#@#@#@#@#@1 - 本地开发时注意：
file://协议下几乎所有浏览器都禁用download，必须通过http://或https://服务访问 - 如果后端接口返回的是 blob 数据（如 API 动态生成文件），不能直接用
href指向接口地址，得先用fetch+URL.createObjectURL()构造本地 URL
动态生成文件时用 Blob + createObjectURL 替代 href
当文件内容由 JavaScript 生成（比如导出表格为 Excel、生成 JSON 配置），或来自跨域 API 响应，download 属性无法直接使用，必须走 Blob 流程。
核心步骤是：获取数据 → 构造 Blob → 创建临时对象 URL → 触发下载 → 清理 URL。
-
URL.createObjectURL()返回的 URL 只能用于下载或显示，不能用于网络请求 - 每次调用后记得用
URL.revokeObjectURL()释放内存，尤其在频繁导出场景下，否则可能泄漏 - IE 不支持
createObjectURL，需 fallback 到msSaveBlob（仅 IE10+）
const data = "name,age\nAlice,28\nBob,32";
const blob = new Blob([data], { type: "text/csv;charset=utf-8" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "users.csv";
a.click();
URL.revokeObjectURL(url); // 必须执行
服务器响应头影响 download 行为
即使用了 download 属性，如果服务端返回的响应头中包含 Content-Disposition: inline 或缺失 filename，部分浏览器（尤其是 Safari）仍可能选择预览而非下载。
最稳妥的方式是服务端主动设置响应头：
-
Content-Disposition: attachment; filename="report.pdf"（强制下载并指定默认文件名） -
Content-Type尽量准确，例如application/pdf、text/csv；设为application/octet-stream是通用 fallback，但可能丢失 MIME 特性（如 PDF 预览） - 如果前端用
fetch获取跨域文件，需确保服务端设置了Access-Control-Allow-Origin，否则 fetch 会失败
移动端 Safari 对 download 的支持极差
iOS Safari 完全不支持 a[download]，无论同源与否，点击都会尝试打开文件（PDF/图片等），不会弹出保存对话框。
目前没有纯前端方案能绕过这个限制。唯一可行路径是服务端配合：
- 检测 User-Agent，对 iOS 设备返回带
Content-Disposition: attachment的响应，并引导用户「长按链接 → 选择“下载”」 - 或在页面提示：“请用 Safari 外的浏览器（如 Chrome）下载”，因为 iOS 上 Chrome、Firefox 实际使用 WebKit 内核，同样受限，但部分第三方浏览器（如 Documents by Readdle）支持文件系统写入
- App 内嵌 WebView 若有权限，可通过原生桥接调用文件保存 API，但这已超出 HTML 范畴
真正落地时，别只测 Chrome 和桌面 Firefox —— iOS Safari 的行为偏差最容易被忽略，而且没法用 polyfill 补救。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
