导出按钮无响应或404，主因是接口路径错误、缺参（如reportid/format）或get/post混用；应改用post+json传参并返回downloadtoken跳转下载；大文件需防超时和内存溢出，推荐后端生成直链+动态a标签触发下载，并添加时间戳防缓存；进度条须轮询任务状态接口实现。
导出按钮点击后没反应，fetch 返回 404 或空响应？
常见原因是后端接口路径写错，或前端没传必要参数（比如 reportId、format）。检查 Network 面板里请求的 URL 是否拼接正确，特别是带查询参数时，别漏掉 ? 或误用 &。后端如果要求 POST 提交数据，但前端用了 GET 的 fetch(url)，也会直接失败。
推荐做法：统一用 POST + JSON body 发送导出请求，后端返回一个临时下载令牌（如 downloadToken），再跳转到 /api/download?token=xxx 触发浏览器下载。这样能避免 GET 链路过长、参数被截断的问题。
- 不要在
href里硬编码完整 URL，改用 JS 动态构造 - 导出前加 loading 状态，禁用按钮防止重复提交
- 后端返回非 2xx 状态码时，必须读取
response.json()拿错误信息，不能只看ok
下载大报表卡死或提示“网络错误”，其实是 fetch 超时或内存爆了
浏览器默认没有超时控制，10MB 以上的 Excel 导出，fetch 会把整个文件载入内存再触发下载，容易卡住甚至崩溃。更稳的方式是用 stream + ReadableStream 分块读取，但兼容性有限；生产环境更推荐后端生成文件后返回直链，前端用 location.href 或 iframe 触发下载。
示例安全写法：
const link = document.createElement('a');
link.href = `/api/export/report/${reportId}/xlsx?ts=${Date.now()}`;
link.download = `report_${reportId}.xlsx`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
- 加
ts时间戳防缓存，尤其 IE/Edge 对相同 URL 复用缓存响应 - 不用
window.open()，它可能被弹窗拦截器屏蔽 - 服务端响应头必须含
Content-Disposition: attachment; filename="xxx.xlsx"
进度条始终不动，XMLHttpRequest.upload.onprogress 根本不触发？
导出本质是服务端生成文件，前端无法真正监听“生成中”的进度 —— onprogress 只对上传有效，下载阶段浏览器不暴露实时字节数。所谓“进度”，只能靠轮询后端任务状态接口（如 /api/task/{id}）来模拟。
- 导出请求返回后，立刻启动定时器调用状态接口，查
status: "running" | "success" | "failed" - 状态接口要返回预估耗时或已完成百分比（由后端根据队列位置或已处理行数计算）
- 别轮询太频繁（
- 用户关闭页面时记得
clearInterval，否则后台还在跑无意义请求
导出 CSV 中文乱码、Excel 打开提示“文件损坏”？
根本原因在服务端没设对响应头。前端无论怎么处理，只要后端返回的 Content-Type 错了或缺 charset，浏览器就按默认编码解析。CSV 必须声明 text/csv;charset=utf-8 并在内容开头加 BOM（\uFEFF）；Excel 文件（.xlsx）则必须是 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet，且不能额外输出空格、换行或调试 console.log 内容。
- Node.js 后端用
res.setHeader("Content-Type", "...")显式设置，别依赖框架默认 - PHP 要在输出前调用
header()，且确保没任何输出（包括 UTF-8 BOM）在header()之前 - 测试时用 curl 直接请求接口，
curl -I看响应头是否正确
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
