react导出csv

小周小周天天喝粥

已于 2022-06-16 20:09:35 修改

阅读量2.1k

点赞数 1

分类专栏： react 文章标签： react.js javascript

于 2022-06-16 20:08:19 首次发布

本文链接：https://blog.csdn.net/weixin_45574126/article/details/125322111

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了在React项目中如何实现CSV数据导出，提供了使用react-csv和csv-exportor两个插件的方法。通过react-csv，可以直接在链接元素中设置数据和头部信息导出；而csv-exportor则需要通过按钮触发导出，调用downloadCsv方法。详细使用方法可参考官方文档。

摘要由CSDN通过智能技术生成

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>
   )
   }
}