Node.js+React使用SheetJS生成XLSX文件后无法打开的问题

问题描述 #

使用Node.js结合SheetJS生成xlsx文件，前端React通过按钮调用后端接口下载文件后，无法正常打开，MS Excel提示：

文件格式或文件扩展名无效。请确定文件未损坏，并且文件扩展名与文件的格式匹配。

错误分析 #

代码存在几处关键问题：

• 后端未设置正确的响应头，且数据发送方式不符合文件下载规范
• 前端存在异步逻辑混用、Blob创建错误、变量未定义等问题

修正后的代码 #

后端代码（Node.js + Express） #

import { utils, write } from 'xlsx';
import { Request, Response } from 'express';
import { OK } from 'http-status-codes';

// 假设sampleData是已定义的数据源
const sampleData = [/* 你的业务数据 */];

export function exportExcel(req: Request, res: Response) {
  try {
    const workbook = utils.book_new();
    const fileName = "sample.xlsx";
    const dataSheet = utils.json_to_sheet(sampleData);
    // 设置规范的工作表名称，避免特殊字符
    utils.book_append_sheet(workbook, dataSheet, "数据表格");
    // 生成Buffer类型内容，适配Node.js响应发送
    const buffer = write(workbook, {
      type: "buffer",
      bookType: "xlsx",
    });

    // 设置必要响应头
    res.setHeader(
      'Content-Type',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    );
    res.setHeader(
      'Content-Disposition',
      `attachment; filename="${encodeURIComponent(fileName)}"`
    );
    return res.status(OK).send(buffer);
  } catch (error) {
    console.error('Excel生成失败:', error);
    return res.sendStatus(500);
  }
}

前端代码（React） #

import axios from 'axios';

const handleExcelExport = async () => {
  try {
    const fileName = "sample.xlsx";
    const response = await axios.get('/export-excel', {
      responseType: "blob", // 指定响应为Blob类型
    });

    // 基于响应数据创建Blob，匹配正确的MIME类型
    const blob = new Blob([response.data], {
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    });
    const link = document.createElement("a");
    const url = window.URL.createObjectURL(blob);
    link.href = url;
    link.download = fileName;
    link.click();
    // 释放临时URL，避免内存泄漏
    window.URL.revokeObjectURL(url);
  } catch (error) {
    console.error('Excel导出失败:', error);
    alert('导出Excel失败，请稍后重试');
  }
};

// 按钮组件
<button onClick={handleExcelExport}>导出Excel</button>

关键修正点 #

• 后端：

  1. 将write方法的type改为buffer，更适配Node.js向客户端发送文件内容
  2. 添加Content-Type头，明确指定xlsx文件的标准MIME类型
  3. 添加Content-Disposition头，指定下载方式和文件名（用encodeURIComponent兼容中文文件名）
  4. 增加错误日志打印，便于排查生成过程中的问题

• 前端：

  1. 统一用async/await处理异步请求，避免与then混用导致逻辑混乱
  2. 创建Blob时使用response.data（axios设置responseType: "blob"后，文件内容存在data字段）
  3. 指定Blob的MIME类型与后端响应头一致，确保系统正确识别文件格式
  4. 添加window.URL.revokeObjectURL释放临时URL，防止内存泄漏
  5. 增加错误捕获和用户提示，提升交互体验

内容的提问来源于stack exchange，提问作者Fer-de-lance