react实现 antdesign table表格导出 excel表格功能

要实现Ant Design Table表格导出Excel表格功能，可以使用react-export-excel库。以下是实现步骤：

1. 安装react-export-excel库

npm install react-export-excel

2. 引入ExcelFile、ExcelSheet和ExcelColumn组件

import {ExcelFile, ExcelSheet, ExcelColumn} from 'react-export-excel';

3. 创建一个导出按钮，点击时触发导出事件

<button onClick={handleExport}>导出Excel</button>

4. 编写handleExport函数，在函数中使用ExcelFile、ExcelSheet和ExcelColumn组件定义Excel表格的结构和数据

const handleExport = () => {
  let dataSet = [
    { name: '张三', age: 18, gender: '男' },
    { name: '李四', age: 20, gender: '女' },
    { name: '王五', age: 22, gender: '男' },
  ];
  
  let fileName = '数据表格';
  
  let data = [
    {
      columns: [
        { title: '姓名', dataIndex: 'name' },
        { title: '年龄', dataIndex: 'age' },
        { title: '性别', dataIndex: 'gender' },
      ],
      data: dataSet,
    },
  ];
  
  return (
    <ExcelFile filename={fileName}>
      <ExcelSheet dataSet={data} name="数据表格" />
    </ExcelFile>
  );
};

5. 点击导出按钮即可下载生成的Excel表格文件。

注意：在数据集中，每个对象的属性名要与ExcelColumn组件中的dataIndex属性值相对应。