如何使用 React js 将 return table 数据导出到 csv 文件

Question

我是 React js 的新手。

我正在尝试通过单击按钮将返回的表格数据导出到 csv 文件。

let names = [
  {firstName: 'John',lastName: 'Cena'},
  {firstName: 'Rey',lastName: 'Mysterio'},
]

const App = props => {
  return (
    <div>
      {names.length > 0 && <table> //table renders only when array has elements 
        <tbody>
        <tr>
        <th>First Name</th>   //setting headers
        <th>Last Name</th>
        </tr>
        {names.map((name,index) => {       //mapping for individual rows
          return (
            <tr key={index}>
              <td>{name.firstName}</td>
              <td>{name.lastName}</td>
            </tr>
          )
        })}
        </tbody>
      </table>}
    </div>
  );
};

我想创建一个名为导出的按钮，然后它应该下载返回到 csv 文件的 table 数据。

非常感谢任何帮助。谢谢

Answer 1

像 react-csv 这样的库将帮助您轻松地将数据导出到 csv 文件，这里是一个示例：

import { CSVLink, CSVDownload } from "react-csv";
    
let names = [
  {firstName: 'John',lastName: 'Cena'},
  {firstName: 'Rey',lastName: 'Mysterio'},
]

const App = props => {
  return (
    <>
      <CSVLink data={names}>Download me</CSVLink>;
      // or
      <CSVDownload data={names} target="_blank" />;
    </>
  );
};

有关图书馆的更多信息，请访问：https://www.npmjs.com/package/react-csv

如何使用 React js 将 return table 数据导出到 csv 文件

how to export the return table data to a csv file using react js

html

javascript

css

frontend

reactjs