如何在 single-page-application(React JS) 内的 csv 文件中写入数据？

Question

我想在 react-application(create-react-app) 内的 csv 文件中写入或覆盖数据（或插入行）。我现在的 App.js 文件是 -

import React, { Component} from 'react';

const csvData =[
  ['Ahmed', 'Tomi' , 'ah@smthing.co.com'] ,
  ['Raed', 'Labes' , 'rl@smthing.co.com'] ,
  ['Yezzi','Min l3b', 'ymin@cocococo.com']
];

export default class App extends Component {

    render() {
        return(
            <div>
            </div>
            );
    }

}

在这里，我想在我的 react-application

中一个名为 data.csv 的 csv 文件中插入 csvData

我的data.csv现在是：

Name,NickName,Email
Rahul B.,Rah,bbh@smthing.co.com
Abhinav K.,Abhi,xyzh@smthing.co.com
Akshay G.,Aksh,abc@smthing.co.com

其中

Name,NickName,Email

是我的 csv 文件的 headers。

我希望我的 data.csv 看起来像 -

Name,NickName,Email
Rahul B.,Rah,bbh@smthing.co.com
Abhinav K.,Abhi,xyzh@smthing.co.com
Akshay G.,Aksh,abc@smthing.co.com
Ahmed, Tomi , ah@smthing.co.com
Raed, Labes , rl@smthing.co.com
Yezzi,Min l3b,ymin@cocococo.com

那么如何使用我的 App 组件（React 组件）更新 data.csv。

提前致谢。

Answer 1

你可以使用这个库这对我有帮助

https://www.npmjs.com/package/react-csv

请注意，此命令会将库安装到您的项目文件夹中。

npm i react-csv

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

const csvData =[
  ['firstname', 'lastname', 'email'] ,
  ['Ahmed', 'Tomi' , 'ah@smthing.co.com'] ,
  ['Raed', 'Labes' , 'rl@smthing.co.com'] ,
  ['Yezzi','Min l3b', 'ymin@cocococo.com']
];

<CSVLink data={csvData} >Download me</CSVLink>
// or
<CSVDownload data={csvData} target="_blank" />

如何在 single-page-application(React JS) 内的 csv 文件中写入数据？

How to write data in a csv file within single-page-application(React JS )?

reactjs

papaparse

create-react-app