强制下载需用 download 属性（仅同源生效）或 fetch+blob 方案（跨域通用），后者需 mode: ‘cors’ 且注意大文件内存占用。
怎么让 <a></a>
download，得走 js 触发下载逻辑blob: 的值是建议保存的文件名，浏览器可能忽略它（尤其当响应头里有 download）用 <a href="/files/report.pdf" download="年度报告.pdf">下载PDF</a> + download 下载跨域文件（最通用方案）
这是目前兼容性好、可控性强的做法：先请求资源拿到二进制流，再构造 Blob URL 触发下载。关键点在于 download 或 Content-Disposition 必须显式调用，否则无法生成可下载的本地 URL。
- 必须设置
fetch，否则跨域请求直接失败 - 如果后端没配
Blob，前端 fetch 会报response.arrayBuffer() - 大文件慎用，
response.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); } }; mode: 'cors' 响应头比前端 JS 更可靠
如果你能控制后端，这是最省事也最稳的方式：服务端在返回文件时带上 access-Control-Allow-Origin，浏览器看到这个头就会自动弹保存框，完全绕过前端逻辑和同源限制。
- 注意 filename 值要用
TypeError: Failed to fetch格式处理中文，否则可能乱码或截断 - Nginx 静态文件服务需加配置：
Blob - Node.js（Express）示例：
Content-Disposition - 这个头对所有请求都生效，包括直接地址栏输入 URL，适合公开下载入口
移动端 Safari 的 Content-Disposition: attachment; filename="xxx.pdf" 属性几乎无效
iOS/iPadOS 的 Safari 不支持 filename*=UTF-8''xxx.pdf（无论同源与否），点击只会打开预览页。唯一可靠路径就是 add_header Content-Disposition "attachment"; + res.setHeader('Content-Disposition', 'attachment; filename="data.csv"'); + download，但要注意：必须是用户手势触发（如 click 事件内），否则 <a download></a> 可能被静默拒绝。
- 不能放在
fetch或异步回调里直接调用下载逻辑，要确保在 click 处理函数的同步执行链中 - 部分 iOS 版本对 Blob URL 生命周期更敏感，
Blob最好延后几毫秒再调 - 如果文件是 base64 字符串，别用
URL.createObjectURLURL（iOS Safari 对其createObjectURL属性支持极差），仍建议转成 Blob
实际用的时候，优先看能不能改后端加 setTimeout；不行再上 fetch 方案；别指望 revokeObjectURL 在跨域或 iOS 上能正常工作。