React 使用 axios 下载二进制文件时默认将响应体解析为 UTF-8 字符串，导致图片、Excel 等非文本文件损坏；改用 fetch 并显式调用 .blob() 可确保原始字节流不被错误解码。
react 使用 axios 下载二进制文件时默认将响应体解析为 utf-8 字符串，导致图片、excel 等非文本文件损坏；改用 `fetch` 并显式调用 `.blob()` 可确保原始字节流不被错误解码。
在 React 应用中实现文件下载功能时，一个常见却隐蔽的陷阱是：看似成功的下载，实际文件内容已损坏。典型表现为——下载的图片无法预览、PDF 打不开、ZIP 解压失败，或用文本编辑器打开后满屏乱码/问号（）。根本原因在于：axios 默认将 HTTP 响应体当作 UTF-8 文本处理，而二进制文件（如 JPG、PNG、DOCX）并非合法 UTF-8 字节序列，强制转字符串会破坏原始字节。
虽然后端（如 Spring Boot）正确设置了 Content-Type 和 Content-Disposition，且 Postman 或浏览器直接访问能正常下载，但 axios 的默认行为会“越俎代庖”地对 resp.data 进行字符解码，使二进制数据失真。
✅ 正确解法：使用原生 fetch API，并明确指定响应类型为 blob：
const onDownload = async () => {
try {
const token = localStorage.getItem("token");
const response = await fetch(`http://localhost:8080/files/download/${id}`, {
method: "GET",
headers: {
Authorization: `Bearer ${token}`,
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// 关键：显式获取 Blob，保留原始二进制数据
const blob = await response.blob();
// 安全生成下载链接（注意：需后端返回正确的 Content-Disposition 或提供 filename）
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = file.filename || 'download'; // 建议后端通过响应头提供 filename
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
// 清理内存
URL.revokeObjectURL(url);
} catch (error) {
console.error("文件下载失败:", error);
// 可在此处提示用户（如 Toast）
}
};⚠️ 注意事项与最佳实践：
- 不要用 axios 处理二进制下载：除非你显式配置 responseType: 'arraybuffer' 并手动构造 Blob（冗余且易错），否则默认行为必然导致损坏。
- 务必检查 response.ok：fetch 不会在 HTTP 错误状态（如 401、500）时抛异常，需主动判断。
- Content-Disposition 优先于前端硬编码 filename：理想情况下，后端应在响应头中设置 Content-Disposition: attachment; filename="report.pdf"，前端可通过 response.headers.get('content-disposition') 解析真实文件名，提升健壮性。
- 及时释放 objectURL：调用 URL.revokeObjectURL(url) 避免内存泄漏，尤其在高频下载场景下。
- 兼容性考虑：fetch + Blob 在现代浏览器（Chrome 42+, Firefox 39+, Edge 14+, Safari 10.1+）中完全支持；若需支持 IE11，应降级使用 XMLHttpRequest 并设置 responseType = 'blob'。
总结：文件下载的本质是字节流传输，而非文本渲染。坚持“用什么类型请求，就用对应类型接收”原则——服务端返回二进制，前端就用 blob 接收。这是保障文件完整性的底层契约，也是专业前端工程实践中不可妥协的基础规范。
