如何在Syncfusion React Grid中导出隐藏列并将图标列导出为状态名称

嘿，我之前刚好碰到过一模一样的需求，折腾了好一阵才找到完美的解决办法，给你分享两个可行的方案，都能满足「UI只显示状态图标，导出时自动换成状态名称」的要求，而且不用让状态名称列在UI上显示：

方案1：隐藏状态名称列 + 导出时包含隐藏列 #

这个思路是专门加一个存状态名称的列，把它设为UI不可见，然后配置导出时强制包含隐藏列，同时把显示图标的列设置为不导出，避免导出图标对应的无效内容。

代码示例 #

import { ColumnDirective, ColumnsDirective, GridComponent, ExcelExport, CsvExport, Inject } from '@syncfusion/ej2-react-grids';
import { ExcelExportProperties, CsvExportProperties } from '@syncfusion/ej2-grids';

function AccountGrid() {
  // 模拟数据源
  const gridData = [
    { id: 1, statusCode: 'active', statusName: '已激活' },
    { id: 2, statusCode: 'inactive', statusName: '未激活' },
    { id: 3, statusCode: 'pending', statusName: '待审核' },
  ];

  // Excel导出函数
  const handleExcelExport = () => {
    const exportProps: ExcelExportProperties = {
      includeHiddenColumns: true, // 关键配置：导出包含隐藏列
    };
    const grid = document.getElementById('account-grid') as GridComponent;
    grid.excelExport(exportProps);
  };

  // CSV导出函数（同理）
  const handleCsvExport = () => {
    const exportProps: CsvExportProperties = {
      includeHiddenColumns: true,
    };
    const grid = document.getElementById('account-grid') as GridComponent;
    grid.csvExport(exportProps);
  };

  // 状态图标渲染模板
  const statusIconTemplate = (props: any) => {
    switch(props.statusCode) {
      case 'active':
        return <span className="text-green-500">✅</span>;
      case 'inactive':
        return <span className="text-red-500">❌</span>;
      case 'pending':
        return <span className="text-yellow-500">⌛</span>;
      default:
        return <span>❓</span>;
    }
  };

  return (
    <div className="p-4">
      <div className="mb-4">
        <button onClick={handleExcelExport} className="mr-2 px-4 py-2 bg-blue-500 text-white rounded">导出Excel</button>
        <button onClick={handleCsvExport} className="px-4 py-2 bg-gray-500 text-white rounded">导出CSV</button>
      </div>
      <GridComponent 
        id="account-grid" 
        dataSource={gridData} 
        allowExcelExport={true} 
        allowCsvExport={true}
      >
        <ColumnsDirective>
          <ColumnDirective field="id" headerText="账户ID" width="120" />
          {/* UI显示图标的列：设置不导出 */}
          <ColumnDirective 
            field="statusCode" 
            headerText="账户状态" 
            template={statusIconTemplate} 
            allowExporting={false} 
            width="150"
          />
          {/* 隐藏的状态名称列：UI不可见，但导出时会被包含 */}
          <ColumnDirective 
            field="statusName" 
            headerText="账户状态" 
            visible={false} 
          />
        </ColumnsDirective>
        {/* 注入导出服务 */}
        <Inject services={[ExcelExport, CsvExport]} />
      </GridComponent>
    </div>
  );
}

export default AccountGrid;

方案2：同一列使用双模板（UI模板 + 导出模板）（更推荐） #

这个方案更简洁，不需要额外加隐藏列，直接给显示图标的列配置exportTemplate属性，指定导出时要渲染的内容（状态名称）。UI上用template显示图标，导出时自动切换成exportTemplate里的状态名称，完美契合需求。

代码示例 #

import { ColumnDirective, ColumnsDirective, GridComponent, ExcelExport, CsvExport, Inject } from '@syncfusion/ej2-react-grids';

function AccountGrid() {
  const gridData = [
    { id: 1, statusCode: 'active' },
    { id: 2, statusCode: 'inactive' },
    { id: 3, statusCode: 'pending' },
  ];

  const handleExcelExport = () => {
    const grid = document.getElementById('account-grid') as GridComponent;
    grid.excelExport();
  };

  const handleCsvExport = () => {
    const grid = document.getElementById('account-grid') as GridComponent;
    grid.csvExport();
  };

  // UI显示的图标模板
  const statusIconTemplate = (props: any) => {
    switch(props.statusCode) {
      case 'active':
        return <span className="text-green-500">✅</span>;
      case 'inactive':
        return <span className="text-red-500">❌</span>;
      case 'pending':
        return <span className="text-yellow-500">⌛</span>;
      default:
        return <span>❓</span>;
    }
  };

  // 导出时使用的模板：直接返回状态名称（可以用映射表处理）
  const statusExportTemplate = (props: any) => {
    const statusMap = {
      'active': '已激活',
      'inactive': '未激活',
      'pending': '待审核',
    };
    return statusMap[props.statusCode] || '未知状态';
  };

  return (
    <div className="p-4">
      <div className="mb-4">
        <button onClick={handleExcelExport} className="mr-2 px-4 py-2 bg-blue-500 text-white rounded">导出Excel</button>
        <button onClick={handleCsvExport} className="px-4 py-2 bg-gray-500 text-white rounded">导出CSV</button>
      </div>
      <GridComponent 
        id="account-grid" 
        dataSource={gridData} 
        allowExcelExport={true} 
        allowCsvExport={true}
      >
        <ColumnsDirective>
          <ColumnDirective field="id" headerText="账户ID" width="120" />
          {/* 同一列：UI用图标模板，导出用名称模板 */}
          <ColumnDirective 
            field="statusCode" 
            headerText="账户状态" 
            template={statusIconTemplate} 
            exportTemplate={statusExportTemplate} 
            width="150"
          />
        </ColumnsDirective>
        <Inject services={[ExcelExport, CsvExport]} />
      </GridComponent>
    </div>
  );
}

export default AccountGrid;

额外提示 #

• 记得要在Grid里注入对应的导出服务（ExcelExport、CsvExport），不然导出功能会失效。
• 如果你的状态名称是后端返回的，直接在exportTemplate里取对应的字段就行，不用自己写映射表。

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