Javascript 反应表中的导出到CSV按钮

正在寻找将“导出到CSV”按钮添加到react表的方法，react表是npmjs包（）

---

我需要添加一个自定义按钮，用于将表格数据以csv或xls格式导出到excel工作表？

查看此npm库-

例如-

import {CSVLink, CSVDownload} from 'react-csv';

const csvData =[
  ['firstname', 'lastname', 'email'] ,
  ['John', 'Doe' , 'john.doe@xyz.com'] ,
  ['Jane', 'Doe' , 'jane.doe@xyz.com']
];
<CSVLink data={csvData} >Download me</CSVLink>
// or
<CSVDownload data={csvData} target="_blank" />

从'react csv'导入{CSVLink，CSVDownload}；
常数csvData=[
['firstname'，'lastname'，'email']，
约翰、多伊、约翰。doe@xyz.com'] ,
[Jane]、[Doe]、[Jane]。doe@xyz.com']
];
下载我
//或

虽然公认的答案是正确的，但要使集成无缝，还需要做更多的工作。下面是集成的样子

import React from 'react';
import 'react-dropdown/style.css'
import 'react-table/react-table.css'
import ReactTable from "react-table";
import {CSVLink} from "react-csv";

const columns = [
   {
       Header: 'name',
       accessor: 'name', // String-based value accessors!
   },
   {
       Header: 'age',
       accessor: 'age',

  }]
class AllPostPage extends React.Component {
    constructor(props) {
       super(props);
       this.download = this.download.bind(this);
       this.state = {
          tableproperties: {
             allData: [
                {"name": "ramesh","age": "12"},
                {"name": "bill","age": "13"},
                {"name": "arun","age": "9"},
                {"name": "kathy","age": "21"}
             ]
          },
          dataToDownload: []
       };
    }

   download(event) {
      const currentRecords = this.reactTable.getResolvedState().sortedData;
      var data_to_download = []
      for (var index = 0; index < currentRecords.length; index++) {
         let record_to_download = {}
         for(var colIndex = 0; colIndex < columns.length ; colIndex ++) {
            record_to_download[columns[colIndex].Header] = currentRecords[index][columns[colIndex].accessor]
         }
         data_to_download.push(record_to_download)
      }
      this.setState({ dataToDownload: data_to_download }, () => {
         // click the CSVLink component to trigger the CSV download
         this.csvLink.link.click()
      })
    } 

    render() {
       return <div>
                 <div>
                    <button onClick={this.download}>
                        Download
                    </button>
                 </div>
                 <div>
                    <CSVLink
                        data={this.state.dataToDownload}
                        filename="data.csv"
                        className="hidden"
                        ref={(r) => this.csvLink = r}
                        target="_blank"/>

                 </div>
                 <div>
                    <ReactTable ref={(r) => this.reactTable = r}
                                data={this.state.tableproperties.allData} columns={columns} filterable
                                defaultFilterMethod={(filter, row) =>
                                    String(row[filter.id]).toLowerCase().includes(filter.value.toLowerCase())}
                    />
                 </div>
              </div>
    }
}

export default AllPostPage;

从“React”导入React；
导入“反应下拉列表/style.css”
导入“react table/react table.css”
从“反应表”导入反应表；
从“react csv”导入{CSVLink}；
常量列=[
{
标题：“名称”，
访问器：'名称'，//基于字符串的值访问器！
},
{
标题：“年龄”，
访问者：“年龄”，
}]
类AllPostPage扩展React.Component{
建造师（道具）{
超级（道具）；
this.download=this.download.bind（this）；
此.state={
表属性：{
所有数据：[
{“姓名”：“ramesh”，“年龄”：“12”}，
{“姓名”：“比尔”，“年龄”：“13”}，
{“姓名”：“阿伦”，“年龄”：“9”}，
{“姓名”：“凯西”，“年龄”：“21”}
]
},
dataToDownload:[]
};
}
下载（活动）{
const currentRecords=this.reactTable.getResolvedState（）.sortedData；
var数据到下载=[]
对于（var索引=0；索引{
//单击CSVLink组件以触发CSV下载
this.csvLink.link.click（）
})
} 
render（）{
返回
下载
this.csvLink=r}
target=“\u blank”/>
this.reactable=r}
data={this.state.tableproperties.allData}columns={columns}可过滤
defaultFilterMethod={（过滤器，行）=>
字符串（行[filter.id]）.toLowerCase（）.includes（filter.value.toLowerCase（））}
/>
}
}
导出默认的AllPostPage；

---

这同样适用于过滤器。

我想我应该借助一个简化的

下载
实现来实现“最美好的祝愿”这一极其宝贵的答案

  export = e => {
    const currentRecords = this.ReactTable.getResolvedState().sortedData;
    this.setState({ dataToDownload: this.dataToDownload(currentRecords, columns) }, () =>
      this.csvLink.link.click()
    );
  }

  dataToDownload = (data, columns) =>
    data.map(record =>
      columns.reduce((recordToDownload, column) => {
        recordToDownload[column.Header] = record[column.accessor];
        return recordToDownload;
      }, {})
    );

我使用它通过添加额外的
export
函数，允许在一个组件中导出多个表。
您是如何获得表中的数据的（比如在应用过滤器之后）。我想导出应用过滤器后显示的数据，而不是整个原始数据。我最终通过在Statance中的react表中设置一个ref并通过此.reactTable.getResolvedState（）检索当前数据使其工作.SORTEDDATA您可以使用一个简单的函数触发下载…并使用
react table
获取
数据
prop的文档化建议谢谢您提供了如何将链接制作成按钮的示例。通过分离标题和数据，可以简化下载方法。看这个。您可以将列标题映射到标题ID，并将其作为标题属性传递给CSVLink组件，并将表ref中的数据作为数据属性进行分类。应该只需尝试一次。您不需要
react csv
，这只会使事情更加复杂。改用@开关