React.js中如何处理axios POST请求API返回的Excel文件实现下载

问题原因 #

你看到的乱码是Excel文件（xlsx本质是zip压缩包，响应开头PK就是zip文件的标识）的二进制流被axios默认以UTF-8字符串格式解析导致的，只要让axios正确接收二进制流，再手动触发浏览器下载即可。

修复步骤 #

1. 修改axios请求配置，指定响应格式为二进制流 #

在你的dashboardexport接口封装代码中，给axios请求补充responseType: 'blob'配置，同时注意你原代码中的配置项header应为headers：

let url = API + "/dashboard/dashboardexport";

formData.append("pcp_user_id", pcp_user_id);
formData.append("role_id", role_id);
formData.append("user_id", user_id);
try {
  // 补充responseType: 'blob'，配置项改为headers
  const response = await axios.post(url, formData, { headers: header, responseType: 'blob' });
  // 这里直接返回整个response对象，方便后续取响应头里的文件名
  return response;
} catch (error) {
  throw Error(error);
}
};

2. 拿到响应后手动触发文件下载 #

接口调用成功后，通过动态创建a标签的方式触发浏览器下载：

const formData = new FormData();
formData.append("DealerID", DealerID);
formData.append("FomDate", fromdate);
formData.append("ToDate", toDate);
formData.append("FixedDateParameter", FixedDateParameter);
formData.append("export_type", export_type);
// 调用导出接口
const response = await dashboardexport({ formData });

// 触发下载逻辑
const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
// 从响应头提取文件名，没有则用默认名
let fileName = '导出数据.xlsx';
const disposition = response.headers['content-disposition'];
if (disposition) {
  const fileNameMatch = disposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
  if (fileNameMatch != null && fileNameMatch[1]) {
    // 处理中文文件名解码
    fileName = decodeURIComponent(fileNameMatch[1].replace(/['"]/g, ''));
  }
}
// 创建下载链接
const downloadUrl = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = downloadUrl;
a.download = fileName;
document.body.appendChild(a);
a.click();
// 释放资源
window.URL.revokeObjectURL(downloadUrl);
document.body.removeChild(a);

内容的提问来源于stack exchange，提问作者kashan ilyas