javascript - 如何使用 ReactJS 轻松地将 JSON 转换和下载为 CSV？

Question

我想将 API 的答案（我得到 JSON 格式的答案）转换为 CSV 格式并下载文件。

我找到了一些 ReactJS 组件，例如 react-json-csv，但我不知道如何在我的代码中使用它。

我有一些复选框，用户在其中做出选择（下载 JSON，CVS），然后是一个按钮“下载”，在处理程序中我检查哪个复选框被选中，这就是我想将 JSON 转换为 CSV 的地方（在处理程序中）。

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Button from "react-bootstrap/Button";
import {toast, ToastContainer} from "react-toastify";

export default class Success extends React.Component {

    constructor(props) {
        super();
        this.state = {
            jsondata : props.location.state.referrer 
        } //put jsons data in state object
    }

    onClickHandlerDownload = () => {
        if(document.getElementById('csvData').checked){
            toast.success('We will download a CSV file ' + document.getElementById('csvData').checked);
// here I want to convert JSON to CSV

        }
        if(document.getElementById('jsonData').checked){
            toast.success('We will download a JSON file ' + document.getElementById('jsonData').checked);
            console.log(this.state.jsondata);
        }
    }

    render() { 
        return (
            <div className="container">
                <p style={{textAlignVertical: "center", textAlign: "center", fontSize: 30}}>Extract the human
                    skeleton of your videos of choice</p>
                <div className="row">
                    <div style={{padding: '50px 300px 100px 300px'}} className="col-md-12 offset-md-12 card">
                        <p style={{textAlignVertical: "center", textAlign: "center", fontSize: 22, color:"green"}}>File processed with success</p>
                        <form action="/analyse" method="post" encType="multipart/form-data">
                            <div className="form-group">
                                <div>
                                    <input type="checkbox" id="withSkeleton"/>
                                    <label htmlFor="withSkeleton">Download file with skeleton</label>
                                </div>
                                <div>
                                    <input type="checkbox" id="withoutSkeleton"/>
                                    <label htmlFor="withoutSkeleton">Download only the skeleton</label>
                                </div>
                                <div>
                                    <input type="checkbox" id="csvData"/>
                                    <label htmlFor="withoutSkeleton">Download data as CSV</label>
                                </div>
                                <div>
                                    <input type="checkbox" id="jsonData"/>
                                    <label htmlFor="withoutSkeleton">Download data as JSON</label>
                                </div>
                            </div>
                            <ToastContainer/>
                            <Button type="button" className="btn btn-success btn-block"
                                    onClick={this.onClickHandlerDownload}>Download
                            </Button>
                        </form>
                    </div>
                </div>
            </div>
        )
    }
}

那么如何将 JSON 转换为 CSV 并下载呢？

标签： javascriptjsonreactjscsv