如何导出React表格至Excel并添加自定义标题列？

核心思路 #

借助xlsx库的json_to_sheet方法的配置参数，自定义表头文本与数据字段的对应关系，让导出的Excel使用你指定的标题，同时匹配正确的数据列。

修改后的完整代码 #

import React from 'react';
import * as XLSX from 'xlsx'

const Excl = ({userDatas}) => {
    // 自定义Excel表头文本，按你需要的顺序排列
    const customHeaders = [
        '用户ID', 
        '用户名', 
        '邮箱', 
        '注册时间' // 示例标题，替换为你实际需要的文本
    ];

    // 对应userDatas中每个对象的属性名，顺序必须和customHeaders一一对应
    const dataFields = [
        'id', 
        'username', 
        'email', 
        'registerTime' // 示例字段名，替换为你的实际数据字段
    ];

    const handleExportExcl = () => {
        // 将原始数据转换为以自定义标题为键的结构
        const formattedData = userDatas.map(item => {
            const row = {};
            dataFields.forEach((field, index) => {
                row[customHeaders[index]] = item[field];
            });
            return row;
        });

        const wb = XLSX.utils.book_new();
        // 生成工作表，自动将formattedData的键作为表头
        const ws = XLSX.utils.json_to_sheet(formattedData);
        XLSX.utils.book_append_sheet(wb, ws, "MySheet");
        XLSX.writeFile(wb, "MyExcel.xlsx")
    }

    return (
        <span onClick={handleExportExcl} className='flex justify-center items-center'>
            <span className='mr-3'></span>EXCEL
        </span>
    );
};

export default Excl;

关键修改点说明 #

• 标题与字段映射：customHeaders定义Excel显示的表头文本，dataFields对应原始数据的属性名，两者顺序必须严格对应，保证标题和数据列匹配。
• 数据格式转换：遍历原始数据，将每个对象转换为以自定义标题为键的新对象，json_to_sheet会自动把这些键作为Excel的表头。
• 代码简化：移除了不必要的数组复制逻辑，直接在转换过程中处理数据，提升效率。

另一种简洁写法（直接修改表头单元格） #

如果不想转换数据结构，也可以直接修改工作表的表头内容：

const handleExportExcl = () => {
    const customHeaders = ['用户ID', '用户名', '邮箱', '注册时间'];
    const dataFields = ['id', 'username', 'email', 'registerTime'];

    // 生成工作表，指定原始数据字段并跳过默认表头
    const ws = XLSX.utils.json_to_sheet(userDatas, {
        header: dataFields,
        skipHeader: true
    });
    // 将自定义标题写入表头单元格（A1位置开始）
    XLSX.utils.sheet_add_aoa(ws, [customHeaders], { origin: 'A1' });

    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "MySheet");
    XLSX.writeFile(wb, "MyExcel.xlsx")
}

这种方式无需修改原始数据结构，适合数据字段较多的场景。

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