React JS中如何导出带自定义表头与字体样式的Excel文件

在React中实现带样式的Excel导出，推荐使用exceljs库，它支持完整的单元格样式定制（包括表头、字体、背景色等），配合file-saver实现文件下载。以下是完整的实现方案：

步骤1：安装依赖 #

执行命令安装所需包：

npm install exceljs file-saver
# 或使用yarn
yarn add exceljs file-saver

步骤2：编写导出函数与组件 #

创建一个React组件，包含导出按钮及核心导出逻辑：

import React from 'react';
import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

const ExcelExportComponent = () => {
  // 模拟数据源
  const tableData = [
    { name: '张三', age: 25, email: 'zhangsan@example.com' },
    { name: '李四', age: 30, email: 'lisi@example.com' },
    { name: '王五', age: 28, email: 'wangwu@example.com' }
  ];

  // 表头配置（包含显示文本与对应数据字段）
  const headers = [
    { key: 'name', label: '姓名' },
    { key: 'age', label: '年龄' },
    { key: 'email', label: '邮箱' }
  ];

  const exportToExcel = async () => {
    // 创建工作簿与工作表
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet('用户数据');

    // 定义表头样式
    const headerStyle = {
      font: { bold: true, size: 12, color: { argb: 'FFFFFF' } }, // 白色加粗字体
      fill: { fgColor: { argb: '2C3E50' } }, // 深色背景
      alignment: { horizontal: 'center', vertical: 'middle' }, // 居中对齐
      border: {
        top: { style: 'thin' },
        left: { style: 'thin' },
        bottom: { style: 'thin' },
        right: { style: 'thin' }
      }
    };

    // 定义普通单元格字体样式
    const cellFontStyle = {
      font: { size: 11, color: { argb: '333333' } } // 深灰色常规字体
    };

    // 添加表头行
    const headerRow = worksheet.addRow(headers.map(h => h.label));
    // 为表头单元格应用样式
    headerRow.eachCell((cell) => {
      cell.style = headerStyle;
    });

    // 添加数据行并应用字体样式
    tableData.forEach(item => {
      const row = worksheet.addRow(headers.map(h => item[h.key]));
      row.eachCell((cell) => {
        cell.style = cellFontStyle;
      });
    });

    // 自动调整列宽
    worksheet.columns.forEach(column => {
      let maxLength = 0;
      column.eachCell({ includeEmpty: true }, (cell) => {
        const columnLength = cell.value ? cell.value.toString().length : 10;
        if (columnLength > maxLength) {
          maxLength = columnLength;
        }
      });
      column.width = maxLength + 2; // 额外增加2个单位宽度
    });

    // 生成Excel文件并下载
    const buffer = await workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    saveAs(blob, '用户数据_带样式.xlsx');
  };

  return (
    <button onClick={exportToExcel} style={{ padding: '8px 16px', cursor: 'pointer' }}>
      导出带样式Excel
    </button>
  );
};

export default ExcelExportComponent;

关键说明 #

• 表头样式定制：通过headerStyle对象定义字体、背景色、对齐方式和边框，覆盖表头单元格的默认样式。
• 字体样式控制：普通单元格的字体大小、颜色通过cellFontStyle统一设置，也可针对特定单元格单独调整。
• 列宽自适应：遍历列计算最大内容长度，自动调整列宽提升可读性。
• 文件下载：利用file-saver将Excel buffer转为Blob并触发浏览器下载。

如果之前尝试过xlsx库，注意该库默认不支持样式定制，必须使用exceljs这类支持样式的库才能实现需求。

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