反应表中的导出到 CSV 按钮

Posted 2023-02-19

【中文标题】反应表中的导出到 CSV 按钮

【英文标题】：Export to CSV button in react table

【发布时间】：2018-07-23 11:16:04

【问题描述】：

正在寻找一种将“导出到 CSV”按钮添加到作为 npmjs 包 (https://www.npmjs.com/package/react-table) 的 react-table 的方法。

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

【问题讨论】：

您是如何获得表中存在的数据的（例如在应用过滤器之后）。我想导出应用过滤器后存在的数据，而不是提供的全部原始数据

好吧，我终于通过在反应表实例中设置一个引用并通过 this.reactTable.getResolvedState().sortedData 检索当前数据来让它工作

可以用一个简单的函数触发下载gist.github.com/xargr/97f160e5ab1bbc513bc7a1acd4ed88e4

【参考方案1】：

下面是集成的样子

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;

这也适用于过滤器。

【讨论】：

感谢您提供如何将链接制作成按钮的示例。

下载方法可以通过分离标题和数据来简化。请参阅此link。您可以将列标题映射到标题 ID，并将其作为标题属性传递给 CSVLink 组件，并将表引用中的 sortedData 作为数据属性。

应该，试一次。

你不需要react-csv，它只会让事情变得更复杂。请改用export-to-csv。

@Switch ***.com/a/48413941/3892213

【参考方案2】：

我在 React + Typescript 中这样实现（无依赖）：

  /**
   * @desc get table data as json
   * @param data
   * @param columns
   */
  const getTableDataForExport = (data: any[], columns: any[]) => data?.map((record: any) => columns
.reduce((recordToDownload, column) => (
   ...recordToDownload, [column.Header]: record[column.accessor] 
), ));

/**
 * @desc make csv from given data
 * @param rows
 * @param filename
 */
const makeCsv = async (rows: any[], filename: string) => 
  const separator: string = ';';
  const keys: string[] = Object.keys(rows[0]);

const csvContent = `$keys.join(separator)\n$
  rows.map((row) => keys.map((k) => 
    let cell = row[k] === null || row[k] === undefined ? '' : row[k];

    cell = cell instanceof Date
      ? cell.toLocaleString()
      : cell.toString().replace(/"/g, '""');

    if (cell.search(/("|,|\n)/g) >= 0) 
      cell = `"$cell"`;
    
    return cell;
  ).join(separator)).join('\n')`;

const blob = new Blob([csvContent],  type: 'text/csv;charset=utf-8;' );
  if (navigator.msSaveBlob)  // In case of IE 10+
    navigator.msSaveBlob(blob, filename);
   else 
    const link = document.createElement('a');
    if (link.download !== undefined) 
      // Browsers that support html5 download attribute
      const url = URL.createObjectURL(blob);
      link.setAttribute('href', url);
      link.setAttribute('download', filename);
      link.style.visibility = 'hidden';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    
  
;

桌子：

<Table data=data columns=columns />

和按钮：

  <button
    type="button"
    onClick=() => makeCsv(getTableDataForExport(data, columns), `$filename.csv`)
  >
    Download table data CSV
  </button>

【参考方案3】：

我想我会通过简化的download 实现来捎带最美好的祝愿非常有价值的答案。

  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 函数来允许在一个组件中导出多个表。

【参考方案4】：

看看这个 npm 库 - https://www.npmjs.com/package/react-csv

例如-

import CSVLink, CSVDownload from 'react-csv';

const csvData =[
  ['firstname', 'lastname', 'email'] ,
  ['John', 'Doe' , '[e-mail]'] ,
  ['Jane', 'Doe' , '[e-mail]']
];
<CSVLink data=csvData >Download me</CSVLink>
// or
<CSVDownload data=csvData target="_blank" />

【讨论】：

...并在this.reactTable.getResolvedState() 上使用react-table 记录的建议来获取data 道具