优先用标签+download属性触发下载；动态参数或需错误处理时用fetch+blob+url.createobjecturl()；后端必须正确设置content-type和content-disposition响应头。
HTML 页面里怎么触发浏览器下载 PDF 或 ZIP 文件
浏览器本身不能直接生成 PDF 或 ZIP，得靠后端服务或前端库配合。用户点“导出”按钮时，实际是发起一次请求，拿到二进制数据再用 window.open()、fetch() + URL.createObjectURL() 或 a.download 触发保存。
常见错误是直接用 window.location.href = '/export/pdf' —— 这在某些后端返回 302 跳转或 Content-Type 不匹配时会失败，页面跳转但没下载；或者用 fetch 拿到 blob 后忘了设置正确的 type，导致 Chrome 下载成乱码文件名或打不开。
- 优先用
<a></a>标签 +download属性：适用于已知 URL 且后端能直接返回带正确Content-Disposition: attachment的响应 - 需要动态参数（如选中行 ID）或需处理错误时，改用
fetch()+blob()+URL.createObjectURL() - PDF 导出若用前端库（如
jsPDF），注意中文需手动加载字体，否则全是方块；ZIP 若用JSZip，别在循环里反复generateAsync()，性能爆炸
后端返回的 Content-Type 和 Content-Disposition 怎么配才不被浏览器拦
浏览器是否弹保存框、文件名是否正确，全看这两个响应头。错一个，就可能变成在新标签页打开 PDF（而不是下载），或 ZIP 解压报“文件损坏”。
典型错误是后端用 text/plain 返回 PDF 二进制流，或者漏写 Content-Disposition，导致 Safari 完全不触发下载。
- Pdf 下载必须配：
Content-Type: application/pdf+Content-Disposition: attachment; filename="report.pdf" - Zip 下载必须配：
Content-Type: application/zip（不是application/x-zip-compressed，后者部分新版 Edge 不认）+Content-Disposition: attachment; filename="data.zip" - 如果后端走代理（如 Nginx），要确认它没覆盖或删掉这些 header；Cloudflare 免费版默认会 strip
Content-Disposition，得开「Cache Level: Bypass」
前端导出按钮点击后没反应？检查这三处
不是代码没跑，是卡在权限、跨域或 MIME 类型校验上。尤其本地开发时用 file:// 协议，fetch 直接被浏览器拒绝。
错误现象包括控制台静默无日志、Network 面板里请求状态为 (blocked)、或报 TypeError: Failed to fetch。
- 确保导出接口协议和当前页面一致（都是
https，或都http），混合协议下 fetch 会被 block - 后端接口必须支持 CORS，且
Access-Control-Allow-Origin不能是*（当带 credentials 时），得明确写域名 - 用
a.download时，href 必须是同源 URL 或blob:协议地址；绝对不能是跨域链接（即使带 download 属性也无效）
导出大文件（>50MB）卡死或内存溢出怎么办
前端拼 ZIP 或生成 PDF 时把整个文件 load 到内存，Chrome 很快 OOM。这不是代码写错了，是架构没分层。
真实场景里，用户选 10 万条记录导出 PDF，前端渲染根本扛不住，必须切到服务端流式生成。
- 前端只传筛选条件（如
{date_from: '2024-01-01', status: 'done'}），后端用流式响应（Transfer-Encoding: chunked）边生成边吐数据 - 避免用
JSZip.generateAsync({type: 'base64'})，改用{type: 'blob'}，再配合URL.createObjectURL()绕过 base64 膨胀 - 真要前端生成大 PDF，用
jsPDF的addPage()分页 +save()前不调output('datauristring')，那玩意儿会把整个 PDF 转成超长字符串塞进内存
导出功能越往后越容易掉进“前端硬扛”的坑——其实大部分时候，用户要的只是文件，不是你 JS 里多炫的生成逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
