如何基于reactjs中检查的表列下载csv文件?

时间:2019-03-25 12:33:02

标签: reactjs antd

我有一个表来显示基于Json的数据。现在我想根据检查的列在CSV文件中下载表格?如何下载?

  import React from "react"
import { Table,Checkbox,Row, Col } from 'antd';
import data from "./shared/student.json"
import { CSVLink, CSVDownload } from "react-csv";

class StudentTable extends React.Component {

    state = {  
        checked: 'false',
        columns: [
            {
                title: 'StudentID',
                dataIndex: 'id',
                key: 'id',

            },
            {
                title: 'Name',
                dataIndex: 'name',
                key: 'name',


            },

            {
                title: 'CourseType',
                dataIndex: 'coursetype',
                key: 'coursetype',

            },

        ]
    }

    onChange = (e,name) => {
       alert(JSON.stringify(e, null, 2))
       console.log(`checked = ${e.target.checked}`)
       if(e.target.checked === true){
           data.push(CsvData)
           console.log(CsvData)
       }


    }

    render() {
        return (
            <div>                            
                <Row>
                    <Col>
                        <Checkbox name="studentid" onChange={this.onChange}>StudentID</Checkbox>
                        <Checkbox name="name" onChange={this.onChange}>Name</Checkbox>
                        <Checkbox name="coursetype" onChange={this.onChange}>CourseType</Checkbox>

                    </Col>
                </Row>

我已经使用CSV链接下载了csv文件。现在我要根据检查的列下载数据?如何下载?

            <CSVLink data={CsvData}>Download me</CSVLink>;

            <h2>Student Data</h2>
            <Table
                dataSource={data}
                columns={this.state.columns}
                pagination={{ pageSize: 5 }}
                rowKey={record => record.id}
                onChange={this.handleChange}

            />    
        </div>

    )
}

}

导出默认的StudentTable

0 个答案:

没有答案