ReactJS下载XLSX文件报错：文件格式或扩展名无效

嗨，我看了你遇到的XLSX下载后无法打开的问题——用React+Axios导出文件后，Excel一直提示“无法打开文件，因为文件格式或扩展名无效”，这坑我之前做报表导出时踩过，咱们来一步步修复你的代码：

先揪出你代码里的几个关键问题： #

1. Blob的MIME类型未正确设置：你创建Blob时type是空字符串，Excel需要识别正确的文件类型才能正常解析；
2. 下载文件名和扩展名缺失：代码里link.download被设为空字符串和空数组，没有指定.xlsx扩展名，Excel没法判断文件格式；
3. URL对象未清理：创建的ObjectURL如果不手动释放，可能会造成内存泄漏（虽然不是直接导致格式问题，但属于前端最佳实践）。

修改后的完整可运行代码： #

const data = 'start_date=2019-07-04&end_date=2019-07-24'; // 注意把&转成&，否则后端可能解析参数出错
axios({ 
  url: `http://localhost:4000/report/data?${data}`, 
  method: 'GET', 
  responseType: 'arraybuffer', // 这个设置是对的，必须指定为arraybuffer接收二进制数据
}).then(response => { 
  // 1. 正确设置XLSX文件的专属MIME类型
  const blob = new Blob([response.data], { 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
  }); 
  
  if (navigator.msSaveOrOpenBlob) { 
    // IE/Edge浏览器兼容：直接指定文件名
    navigator.msSaveBlob(blob, 'report.xlsx'); 
  } else { 
    const link = document.createElement('a'); 
    const url = window.URL.createObjectURL(blob); 
    link.href = url; 
    // 2. 明确指定带.xlsx扩展名的文件名
    link.setAttribute('download', 'report.xlsx'); 
    document.body.appendChild(link); 
    link.click(); 
    document.body.removeChild(link); 
    // 3. 手动清理URL对象，避免内存泄漏
    window.URL.revokeObjectURL(url); 
  } 
});

额外排查点（如果修改后还是报错）： #

• 检查后端返回的Content-Type响应头是否为application/vnd.openxmlformats-officedocument.spreadsheetml.sheet；
• 确认后端确实返回的是合法的XLSX二进制数据，而不是JSON或其他格式的错误响应；
• 如果后端返回的是压缩后的数据流，还需要在前端先解压再创建Blob。

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