ReactJs中如何通过API二进制流下载正常可读的XLSX文件？

问题核心是请求时未正确处理二进制响应类型，导致接口返回的二进制数据被转成字符串，破坏了文件的原始字节结构。

步骤1：修改请求，指定响应类型 #

你的请求默认会把响应解析为字符串，需要明确告诉请求库以二进制格式接收数据。如果ApiUtils基于Axios，修改请求如下：

const response = await ApiUtils.get('users?pageSize=0&download=true', {
  responseType: 'blob' // 或 'arraybuffer'，二者均可处理二进制文件
});

如果是原生Fetch封装的ApiUtils，则调整为：

const response = await fetch('users?pageSize=0&download=true');
const blobData = await response.blob(); // 直接将响应转为Blob

步骤2：调整下载逻辑 #

如果响应已经是Blob类型，无需再用new Blob()包裹，直接使用原始Blob生成URL即可：

const handleDownload = () => {
  const url = URL.createObjectURL(response.data); // 若用Fetch则传入blobData
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'myExcel.xlsx');
  // 临时添加到DOM避免部分浏览器不支持
  document.body.appendChild(link);
  link.click();
  // 清理资源，避免内存泄漏
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
};

原代码损坏文件的原因 #

Postman会自动识别响应的Content-Type为application/vnd.openxmlformats-officedocument.spreadsheetml.sheet，并以二进制格式保存文件。而你的原请求未指定响应类型，接口返回的二进制字节被转换成UTF-8字符串，部分不可打印字节被替换或丢失，最终生成的Blob已不是原始XLSX文件结构，自然无法打开。

内容的提问来源于stack exchange，提问作者Esha Varma