react导出csv

react导出csv"/>

react导出csv

react导出csv

最近在react项目中遇到了将list数据导出csv文件的需求。
找到了两个方法。
方法一：使用react-csv插件

//引入react-csv插件
npm install  react -csv
//引入模块
import React from "react";
import { CSVLink } from "react-csv";
export default class csvList extends React.Component {
state = {list:[];headers:[]
}render() {return (<CSVLinkfilename={"test.csv"}data={this.state.list}headers={this.state.headers}>导出</CSVLink>)}}

更多使用方法可以参考官方文档

方法二：使用csv-exportor插件

//npminstall一下
npm install csv-exportor
//引入
import CsvExportor from "csv-exportor";
export default class csvList extends React.Component {
state = {
list:[];
headers:[]
}
exportCsv = () => {let csvData = this.state.list;CsvExportor.downloadCsv(csvData,{ header: this.state.headers},"test.csv");};render() {return (<Buttontype="danger"onClick={this.exportCsv }>导出</Button>)}
}