react怎么做导出Excel表格

要在React中导出Excel表格，可以使用第三方库react-csv。这个库的作用是将数据导出为CSV格式的文件，而Excel可以很方便地导入CSV文件。

首先，安装react-csv：

npm install react-csv --save

然后，创建一个组件，用于渲染导出按钮和处理数据导出的逻辑。示例代码如下：

import React, { useState } from 'react';
import { CSVLink } from 'react-csv';

function ExportButton({ data }) {
  const [csvData, setCsvData] = useState([]);

  // 处理数据，将数据转换为CSV格式
  const handleExport = () => {
    const headers = [
      { label: 'Name', key: 'name' },
      { label: 'Age', key: 'age' },
      { label: 'Email', key: 'email' },
    ];

    const rows = data.map(item => {
      return {
        name: item.name,
        age: item.age,
        email: item.email,
      };
    });

    setCsvData([headers, ...rows]);
  };

  return (
    <>
      <button onClick={handleExport}>Export CSV</button>
      <CSVLink data={csvData} filename={'mydata.csv'} target='_blank' />
    </>
  );
}

export default ExportButton;

在这个组件中，我们使用useState钩子来保存CSV格式的数据。在handleExport函数中，我们将数据转换为CSV格式，并将结果保存到csvData中。然后，我们渲染一个按钮，当用户点击该按钮时，调用handleExport函数。

最后，我们使用CSVLink组件来实现文件的下载。CSVLink组件接收一个data属性，用于指定要导出的数据。filename属性用于指定导出文件的名称。target属性用于指定打开文件的窗口，这里我们使用'_blank'表示在新窗口打开。

在使用这个组件时，我们只需要将数据作为props传递给ExportButton组件即可。

import React from 'react';
import ExportButton from './ExportButton';

function App() {
  const data = [
    { name: 'Alice', age: 25, email: 'alice@example.com' },
    { name: 'Bob', age: 30, email: 'bob@example.com' },
    { name: 'Charlie', age: 35, email: 'charlie@example.com' },
  ];

  return (
    <div>
      <ExportButton data={data} />
    </div>
  );
}

export default App;