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 (
 				<CSVLink
              		filename={"test.csv"}
              		data={this.state.list}
              		headers={this.state.headers}
            	>
              	导出
            	</CSVLink>
 	)
 }
 }

更多使用方法可以参考官方文档
https://www.npmjs.com/package/react-csv

方法二:使用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 (
   			<Button
              type="danger"
              onClick={this.exportCsv }
   			>
              导出
            </Button>
   )
   }
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐