正确下载方式是动态创建带download属性的元素并调用click()；跨域需后端配合content-disposition；blob需createobjecturl；data url下载应避免window.location赋值；中文文件名由服务端filename*头控制最稳妥。
点击按钮触发下载，但不跳转页面
浏览器默认用 <a></a> 标签的 download 属性实现静默下载，但前提是文件同源（或 Blob URL）。直接用 <button></button> 无法触发下载——它没内置下载能力，必须靠 JavaScript 模拟点击 <a></a> 或创建临时链接。
常见错误是给 <button></button> 绑定 window.location.href = 'xxx.pdf'，这会导致页面跳转或新开页，不是“下载”。
- 正确做法：动态创建一个带
download属性的<a></a>元素，设置href后调用.click() - 如果目标文件跨域（比如 CDN 上的 PDF），
download属性会被忽略，浏览器会打开而非下载——此时只能后端配合加Content-Disposition: attachment - Blob 场景下（如前端生成 CSV），必须用
URL.createObjectURL(blob)生成临时 URL，且记得后续调用URL.revokeObjectURL()避免内存泄漏
下载远程文件时遇到 “Not allowed to navigate top frame to data URL” 错误
这个错误通常出现在你试图对 data URL 或 blob URL 调用 window.open() 或赋值给 window.location 时。现代浏览器禁止用这些方式触发下载，因为存在安全策略限制。
唯一可靠路径是：用 <a></a> + download + .click()，且 href 必须是合法 URL（含 blob URL）。
- 错例：
window.location.href = 'data:text/csv;base64,...'→ 触发报错 - 对例：创建
<a href="data:..." download="report.csv"></a>并 click → 可行（但部分旧版 Safari 不支持 data URL 的 download） - 更稳方案：把 base64 数据转成 Blob，再用
URL.createObjectURL()→ 所有主流浏览器都支持
用 JavaScript 下载时中文文件名乱码或被截断
根本原因是 HTTP 响应头未声明编码，或前端构造的 download 属性值未做 URI 编码。服务端返回的文件名若含中文，需确保响应头包含 Content-Disposition: attachment; filename*=UTF-8''%E4%BD%A0%E5%A5%BD.csv；前端生成的文件名则必须用 encodeURIComponent() 处理。
- 前端写法示例：
link.download = encodeURIComponent('你好.csv');→ 错！download属性不接受编码后的字符串，它会原样当文件名 - 正确做法：
link.download = '你好.csv';（现代浏览器自动处理 UTF-8），但 IE/旧 Edge 不支持，需降级为英文名或服务端控制 - 最保险：服务端在
Content-Disposition中提供filename*字段，前端只管触发下载，不操心文件名
大文件下载卡死或内存爆掉
前端拼接超长 base64 或一次性读取几百 MB 的 ArrayBuffer 到内存，极易触发浏览器 OOM。这不是下载逻辑的问题，而是数据加载方式错了。
- 不要用
fetch().then(r => r.text())加载大 JSON/CSV —— 改用response.body.getReader()流式读取 - 不要把整个文件转成 Blob 再下载 —— 对于已知 URL 的大文件，直接
<a href="xxx.zip" download></a>让浏览器自己处理更高效 - 如果必须前端加工（如加密/压缩），用
TransformStream或分块处理，避免全量加载
真正需要 JS 控制下载的，往往是动态生成内容（如导出表格）、权限校验后获取临时链接、或兼容不支持 download 的老浏览器——别为了“看起来高级”而绕开浏览器原生能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
