Vue 3 中 Axios 批量下载文件分前端打包（Axios+JSZip+FileSaver，适用于小文件少数量）和后端打包（推荐，一次请求返回 ZIP Blob），需设 responseType: 'blob'、处理跨域、超时及兼容性问题。
在 Vue 3 组合式 API 中用 Axios 处理文件批量下载，核心是「前端打包」和「后端打包」两种路径。Axios 主要负责发起请求、获取文件流，但是否压缩、如何合并，取决于你选择哪条技术路线。
前端打包：用 Axios + JSZip + FileSaver
适合文件数量不多（如 ≤ 50 个）、单个文件体积不大（如图片、PDF ≤ 5MB）、且后端不支持 ZIP 打包的场景。Axios 负责逐个拉取二进制数据，JSZip 负责组装，FileSaver 负责触发保存。
- 安装依赖：
npm install axios jszip file-saver - 关键点是设置 responseType: 'blob'，否则无法正确读取二进制内容
- 每个文件请求需独立处理，用
Promise.all等待全部完成，避免 ZIP 损坏 - 注意跨域问题：后端需允许
Access-Control-Expose-Headers: Content-Disposition（若需提取原始文件名）
后端打包：用 Axios 请求 ZIP 流（推荐）
更稳定、性能更好、用户体验更优。前端只发一次请求，后端返回完整 ZIP 的 Blob，Axios 直接接收并保存。这是生产环境首选方案。
- 后端接口（如
/api/files/download-batch）应返回Content-Type: application/zip和带中文名的Content-Disposition - Axios 配置必须含 responseType: 'blob'，否则响应体被 JSON 解析导致失败
- 使用
window.URL.createObjectURL()创建临时 URL，再通过<a>标签触发下载，兼容性优于直接调用saveAs - 建议加 loading 提示，并捕获常见错误（如 404、401、网络中断）
通用工具函数封装（组合式 API 可复用）
把下载逻辑抽成 useBatchDownload Hook，便于多组件调用：
立即学习“前端免费学习笔记（深入）”；
- 接受参数：文件 ID 列表或 URL 列表、自定义 ZIP 名、是否启用后端打包
- 内部自动判断：若传的是 ID，则走 POST 请求；若传的是 URL 数组，则走前端打包流程
- 统一错误处理：对 Blob 响应做类型校验（比如先尝试
JSON.parse，能解析说明是错误 JSON，不是 ZIP） - 支持取消请求（用
AbortController），防止用户重复点击造成冗余请求
注意事项与避坑点
实际开发中容易忽略的细节：
- 大文件下载时，
axios默认超时是 10 秒，需手动设为timeout: 0（禁用）或足够长（如 5 分钟） - IE 不支持
URL.createObjectURL，如需兼容，可降级使用FileSaver.saveAs - 移动端 Safari 对
download属性支持有限，建议用location.href = url替代<a>下载 - 不要在循环里直接
await axios.get()，会串行阻塞；务必用Promise.all并发请求（前端打包时）
