react 点击导出表格数据为Excel表

可以使用第三方库react-data-export来实现导出表格数据为Excel表格。

1. 首先安装react-data-export库：

npm install react-data-export --save

2. 在组件中引入所需的组件：

import ReactExport from "react-data-export";

3. 在需要导出Excel的事件处理函数中，创建Excel表格数据：

// 定义Excel表格数据
const ExcelFile = ReactExport.ExcelFile;
const ExcelSheet = ReactExport.ExcelFile.ExcelSheet;
const ExcelColumn = ReactExport.ExcelFile.ExcelColumn;

const data = [
  {
    name: "John",
    age: 25,
    address: "New York",
  },
  {
    name: "Jane",
    age: 30,
    address: "Los Angeles",
  },
  {
    name: "Bob",
    age: 35,
    address: "Chicago",
  },
];

// 创建Excel表格
const MySheet = () => (
  <ExcelSheet data={data} name="Sheet1">
    <ExcelColumn label="Name" value="name" />
    <ExcelColumn label="Age" value="age" />
    <ExcelColumn label="Address" value="address" />
  </ExcelSheet>
);

// 导出Excel表格
const handleExport = () => {
  return (
    <ExcelFile filename="my_data">
      <MySheet />
    </ExcelFile>
  );
};

4. 在组件中渲染导出按钮，并绑定导出事件处理函数：

<button onClick={handleExport}>Export to Excel</button>

这样就可以实现点击按钮导出表格数据为Excel表格的功能了。