API导出Excel/CSV异常：React端下载后数据显示为数字

问题根源 #

1. API端返回的Buffer被序列化为JSON对象（{type: 'Buffer', data: [...]}），而非原始二进制流
2. React端请求时未指定接收二进制数据类型，导致响应被自动解析为JSON
3. Blob的MIME类型设置错误（误用了Excel的类型而非CSV对应类型）

解决方案 #

1. 修正API端代码 #

确保直接返回二进制Buffer，而非序列化后的JSON。以Express框架为例，需设置正确响应头并发送原始Buffer：

// 你的工作簿实例初始化逻辑
const workbook = ...;
const csvBuffer = await workbook.csv.writeBuffer();

// 设置响应头，明确文件类型与下载信息
res.setHeader('Content-Type', 'text/csv;charset=utf-8');
res.setHeader('Content-Disposition', 'attachment; filename="deneme.csv"');
// 直接发送Buffer，禁止使用res.json()方法
return res.send(csvBuffer);

2. 修正React端代码 #

请求时必须指定responseType: 'arraybuffer'，确保接收原始二进制数据；同时修正Blob的MIME类型为CSV格式：

// 先确保请求工具（如axios）配置了正确的响应类型
const getExcel = () => {
    return axios.get('/api/excel', {
        responseType: 'arraybuffer' // 关键配置，强制接收二进制数据
    });
};

const handleDownload = async() => {
    const response = await getExcel();
    // 初始化Blob时使用CSV对应的MIME类型
    const blob = new Blob([response.data], { type: 'text/csv;charset=utf-8' });
    saveAs(blob, 'deneme.csv');
};

关键注意事项 #

• API必须返回原始二进制流，绝对不能将Node.js的Buffer对象转为JSON返回
• React请求必须显式设置responseType: 'arraybuffer'，避免axios等工具自动将响应解析为JSON
• Blob的MIME类型需严格匹配文件格式：CSV对应text/csv;charset=utf-8，Excel对应application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

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