如何修改json_to_sheet导出Excel时的表头名称

要替换json_to_sheet默认的字段名表头为自定义名称，可通过手动构建表头并映射数据字段的方式实现，结合你的现有代码，修改步骤如下：

1. 修正函数命名冲突 #

你的组件内部定义了与组件同名的ExportExcel函数，这会导致逻辑冲突，先将内部函数重命名为handleExport。

2. 自定义表头与数据映射 #

利用已有的columns数组，提取自定义表头名称和对应的数据源字段，手动构建Excel表头并添加数据：

修改后的完整ExportExcel组件代码：

import XLSX from 'xlsx';
import FileSaver from 'file-saver';
import { Tooltip, Button } from '@mui/material';
import FileDownloadIcon from '@mui/icons-material/FileDownload';
import { useMemo } from 'react';

// 字段配置
const columns = useMemo(
  () => [
    {
      accessorKey: "naam",
      header: "Naam", // 自定义表头名称
    },
    // 可添加更多字段配置
  ],
  [],
);

const ExportExcel = ({ excelData, fileName}) => {
  const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
  const fileExtension = '.xlsx';

  const handleExport = async () => {
    // 从columns中提取自定义表头和对应数据字段
    const customHeaders = columns.map(col => col.header);
    const dataFields = columns.map(col => col.accessorKey);

    // 创建包含自定义表头的工作表
    const ws = XLSX.utils.aoa_to_sheet([customHeaders]);
    // 从第二行开始添加数据，映射对应字段，跳过默认表头
    XLSX.utils.sheet_add_json(ws, excelData, {
      origin: 'A2',
      header: dataFields,
      skipHeader: true
    });

    const wb = { Sheets: {'Sheet 1': ws}, SheetNames: ['Sheet 1']};
    const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array'});
    const dataBlob = new Blob([excelBuffer], {type: fileType});
    FileSaver.saveAs(dataBlob, `${fileName}${fileExtension}`);
  }

  return (
    <Tooltip title="Excel Export">
      <Button
        onClick={handleExport}
        startIcon={<FileDownloadIcon />}
        variant="contained"
      >
        Excel download
      </Button>
    </Tooltip>
  )
}

// 组件使用示例
// <ExportExcel excelData={data} fileName={'Export'}/>

关键逻辑说明 #

• XLSX.utils.aoa_to_sheet([customHeaders])：将自定义表头数组转换为Excel工作表的第一行
• XLSX.utils.sheet_add_json：从第二行开始添加数据，通过header参数指定数据源的字段名，skipHeader: true避免重复生成默认表头

这样导出的Excel文件就会使用你定义的header值作为表头，而非数据源的原始字段名。

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