强制下载需用 download 属性（仅同源生效）或 fetch+Blob 方案（跨域通用），后者需 mode: 'cors' 且注意大文件内存占用。
怎么让 <a></a> 标签触发文件下载而不是跳转
浏览器默认会尝试在当前页打开图片、PDF、HTML 等资源，而不是下载。想强制下载，必须靠 download 属性，但它有硬性限制：只对同源 URL 或 blob: 协议生效，跨域链接加了 download 也会被忽略，退化为普通跳转。
- 同源时直接写：
<a href="/files/report.pdf" download="年度报告.pdf">下载PDF</a> - 跨域资源（比如 CDN 上的文件）不能用
download，得走 JS 触发下载逻辑 -
download的值是建议保存的文件名，浏览器可能忽略它（尤其当响应头里有Content-Disposition）
用 fetch + Blob 下载跨域文件（最通用方案）
这是目前兼容性好、可控性强的做法：先请求资源拿到二进制流，再构造 Blob URL 触发下载。关键点在于 response.arrayBuffer() 或 response.blob() 必须显式调用，否则无法生成可下载的本地 URL。
- 必须设置
mode: 'cors'，否则跨域请求直接失败 - 如果后端没配
Access-Control-Allow-Origin，前端 fetch 会报TypeError: Failed to fetch - 大文件慎用，
Blob会暂存内存，可能卡顿；小文件（ - 示例代码片段：
const downloadFile = async (url, filename) => {
try {
const res = await fetch(url, { mode: 'cors' });
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const blob = await res.blob();
const blobUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = blobUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(blobUrl);
} catch (err) {
console.error('下载失败:', err.message);
}
};
Content-Disposition 响应头比前端 JS 更可靠
如果你能控制后端，这是最省事也最稳的方式：服务端在返回文件时带上 Content-Disposition: attachment; filename="xxx.pdf"，浏览器看到这个头就会自动弹保存框，完全绕过前端逻辑和同源限制。
- 注意 filename 值要用
filename*=UTF-8''xxx.pdf格式处理中文，否则可能乱码或截断 - Nginx 静态文件服务需加配置：
add_header Content-Disposition "attachment"; - Node.js（Express）示例：
res.setHeader('Content-Disposition', 'attachment; filename="data.csv"'); - 这个头对所有请求都生效，包括直接地址栏输入 URL，适合公开下载入口
移动端 Safari 的 download 属性几乎无效
iOS/iPadOS 的 Safari 不支持 <a download></a>（无论同源与否），点击只会打开预览页。唯一可靠路径就是 fetch + Blob + URL.createObjectURL，但要注意：必须是用户手势触发（如 click 事件内），否则 createObjectURL 可能被静默拒绝。
立即学习“前端免费学习笔记（深入）”；
- 不能放在
setTimeout或异步回调里直接调用下载逻辑，要确保在 click 处理函数的同步执行链中 - 部分 iOS 版本对 Blob URL 生命周期更敏感，
revokeObjectURL最好延后几毫秒再调 - 如果文件是 base64 字符串，别用
data:URL（iOS Safari 对其download属性支持极差），仍建议转成 Blob
Content-Disposition；不行再上 fetch 方案；别指望 <a download></a> 在跨域或 iOS 上能正常工作。 
