如何在TypeScript环境下为material-react-table开启CSV/PDF导出功能？

完全可以给material-react-table添加CSV或PDF导出功能，下面是两种导出方式的具体实现方案：

CSV导出实现 #

你可以直接利用表格的原始数据，结合浏览器的Blob API实现导出，也可以借助papaparse库简化CSV格式化（可选）。

示例代码： #

import { MaterialReactTable } from 'material-react-table';
import { Button } from '@mui/material';
import Papa from 'papaparse'; //可选，若不用则自己处理数据格式化

const YourTableComponent = ({ data }) => {
  //导出CSV函数
  const exportToCSV = () => {
    //如果用papaparse
    const csv = Papa.unparse(data);
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'table-data.csv');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  //不用库的原生实现（简单版）
  // const exportToCSV = () => {
  //   const headers = Object.keys(data[0]).join(',');
  //   const rows = data.map(row => Object.values(row).join(',')).join('\n');
  //   const csv = `${headers}\n${rows}`;
  //   //后续Blob和下载逻辑同上
  // };

  return (
    <>
      <Button variant="contained" onClick={exportToCSV} style={{marginBottom:16}}>
        导出CSV
      </Button>
      <MaterialReactTable data={data} columns={/*你的列配置*/} />
    </>
  );
};

PDF导出实现 #

推荐使用jspdf和jspdf-autotable库来生成带表格的PDF，这两个库能很好地适配表格数据的渲染。

示例代码： #

import { MaterialReactTable } from 'material-react-table';
import { Button } from '@mui/material';
import jsPDF from 'jspdf';
import 'jspdf-autotable';

const YourTableComponent = ({ data }) => {
  const exportToPDF = () => {
    const doc = new jsPDF();
    //设置表格标题
    doc.text('表格数据导出', 14, 16);
    //配置表格列和数据
    const columns = Object.keys(data[0]).map(key => ({title: key, dataKey: key}));
    doc.autoTable({
      columns: columns,
      body: data,
      startY: 20,
    });
    doc.save('table-data.pdf');
  };

  return (
    <>
      <Button variant="contained" onClick={exportToPDF} style={{marginBottom:16, marginLeft:8}}>
        导出PDF
      </Button>
      <MaterialReactTable data={data} columns={/*你的列配置*/} />
    </>
  );
};

集成到表格工具栏（可选） #

如果想把导出按钮集成到material-react-table自带的工具栏里，可以通过toolbarTopCustomActions属性实现：

<MaterialReactTable
  data={data}
  columns={columns}
  toolbarTopCustomActions={({ table }) => (
    <>
      <Button variant="contained" onClick={exportToCSV} style={{marginRight:8}}>
        导出CSV
      </Button>
      <Button variant="contained" onClick={exportToPDF}>
        导出PDF
      </Button>
    </>
  )}
/>

注意：如果你的表格有筛选、分页或者排序，导出时要使用table.getPrePaginationRowModel().rows来获取所有处理后的数据，而不是原始的data，确保导出的是用户当前看到的完整数据（比如筛选后的结果）。

内容的提问来源于stack exchange，提问作者milk_away.89