如何为react-table添加导出过滤后数据至Excel的自定义按钮？

步骤1：替换依赖 #

放弃react-export-table-to-excel，改用更灵活的xlsx库，它能直接处理数据生成xls文件：

npm install xlsx

步骤2：获取过滤后的数据 #

react-table的useTable钩子会返回getFilteredRows方法，调用它就能拿到实时过滤后的行数据，这是确保导出数据准确的核心。

步骤3：编写导出函数 #

写一个函数把过滤后的数据转换成Excel工作表，再生成文件下载，逻辑完全可控。

完整示例代码 #

import React from 'react';
import { useTable, useFilters } from 'react-table';
import * as XLSX from 'xlsx';

// 自定义列配置
const columns = [
  { Header: '姓名', accessor: 'name' },
  { Header: '年龄', accessor: 'age' },
  { Header: '邮箱', accessor: 'email' },
];

// 示例数据源
const data = [
  { name: '张三', age: 25, email: 'zhangsan@example.com' },
  { name: '李四', age: 30, email: 'lisi@example.com' },
  { name: '王五', age: 28, email: 'wangwu@example.com' },
];

const TableWithExport = () => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    getFilteredRows, // 关键：获取过滤后的行数据
  } = useTable(
    { columns, data },
    useFilters // 必须启用过滤功能
  );

  // 导出过滤后数据的核心函数
  const exportToExcel = () => {
    // 提取过滤后每行的原始数据
    const filteredData = getFilteredRows().map(row => row.original);
    
    if (filteredData.length === 0) {
      alert('没有可导出的数据');
      return;
    }

    // 把JSON数据转成Excel工作表
    const worksheet = XLSX.utils.json_to_sheet(filteredData);
    // 创建工作簿并添加工作表
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, '过滤后数据');
    
    // 导出为xls文件
    XLSX.writeFile(workbook, '表格数据.xls');
  };

  return (
    <div>
      {/* 导出按钮 */}
      <button onClick={exportToExcel} style={{ marginBottom: '10px' }}>导出至Excel</button>
      
      {/* react-table 渲染部分 */}
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map(row => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => (
                  <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

export default TableWithExport;

为什么之前会出现undefined？ #

多半是react-export-table-to-excel没有正确关联react-table的过滤状态，它可能直接读取了原始数据，或者没有适配react-table的行数据结构。而用getFilteredRows能确保拿到的是实时过滤后的结果，再用xlsx处理数据更可控。

额外处理提示 #

如果你的列有自定义渲染（比如格式化日期、添加单位），需要手动处理导出字段：

const filteredData = getFilteredRows().map(row => ({
  ...row.original,
  age: `${row.original.age}岁`, // 给年龄加单位
  joinDate: new Date(row.original.joinDate).toLocaleDateString() // 格式化日期
}));

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