React通过Axios POST调用Asp.Net Web API实现Excel下载

你遇到的核心问题有两个：

1. Axios默认不处理二进制数据：Excel文件属于二进制流，Axios默认会把响应解析为JSON格式，这就导致response.data变成null——因为二进制内容无法被解析成有效的JSON。
2. 缺少手动触发下载的逻辑：浏览器不会自动下载API返回的二进制内容，需要你手动创建下载链接来触发这个行为。
   另外还有个小细节：你的请求体里page是小写，但后端QueryParameters类里的属性是Page（大写P），这可能导致后端无法正确接收分页参数，建议统一大小写。

下面是修正后的代码，包含所有必要的配置和下载逻辑：

const requestBody = { From: 10, Page: 2, Size: 10 }; // 注意Page的大小写和后端保持一致

axios({
  method: 'POST',
  url: 'https://myexport.dev.com/export',
  data: requestBody,
  responseType: 'blob' // 关键配置：告诉Axios接收二进制Blob数据
})
.then(response => {
  // 1. 从响应头获取文件名（如果后端返回了的话，可选）
  const contentDisposition = response.headers['content-disposition'];
  let exportFileName = "MyExcel.xlsx";
  if (contentDisposition) {
    const matches = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
    if (matches != null && matches[1]) {
      exportFileName = decodeURIComponent(matches[1].replace(/['"]/g, ''));
    }
  }

  // 2. 创建Blob对象和下载链接
  const blob = new Blob([response.data], { 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
  });
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = exportFileName; // 设置下载的文件名
  document.body.appendChild(a);
  a.click(); // 模拟点击触发下载

  // 3. 清理资源
  window.URL.revokeObjectURL(url);
  document.body.removeChild(a);
})
.catch((error) => {
  console.error('导出失败:', error);
  // 这里可以添加错误提示，比如弹出通知告知用户导出失败
});

• responseType: 'blob'：这是最核心的配置，它告诉Axios不要把响应解析为JSON，而是保留原始的二进制Blob数据，这样response.data就会是有效的Blob对象。
• 手动创建下载链接：通过URL.createObjectURL把Blob转换成浏览器可识别的URL，然后创建隐藏的<a>标签并模拟点击，触发浏览器的下载行为。
• 文件名处理：如果后端在响应头的Content-Disposition里返回了文件名，可以解析这个头来获取正确的文件名，提升用户体验；如果后端没返回，就用默认文件名。
• 参数大小写统一：确保请求体里的参数名和后端QueryParameters类的属性名完全一致（比如Page而不是page），避免后端接收不到参数。

如果你的API需要携带认证信息（比如Token），记得在Axios配置里添加headers，比如：

headers: {
  'Authorization': 'Bearer ' + yourToken
}

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