javascript基于前端框架react或者vue或者其他其他框架导出数据生成csv文件,以及导入csv文件读取数据的简单例子

1.用npm在项目中安装以下插件:

//根据数据导出生成csv文件插件安装
npm install file-saver --save
//导入csv文件生成数据插件安装
npm install papaparse --save
npm install jschardet --save
npm install iconv-lite --save
npm install encoding --save

2.在你要编写项目的文件中导入这些插件:

//引入生成csv文件的插件
import FileSaver from 'file-saver'
//引入根据csv文件生成数据插件
import Papa from "papaparse"
import jschardet from "jschardet"
import iconv from "iconv-lite"
import encoding from "encoding"

3.写一个方法逻辑将数据生成csv文件:

  //点击批量导出数据生成csv文件
  exportList(){
        //拿到所有的数据
        let data=[
          {
            name:"小明",
            pwd:123,
            school:"未知小学",
            age:10
          },
          {
            name:"小红",
            pwd:132,
            school:"未知中学",
            age:15
          },
          {
            name:"大红",
            pwd:321,
            school:"未知大学",
            age:20
          },
        ];
        //定义数据拼接
        //str:table的每一列的标题，即为导出后的csv文件的每一列的标题
        let str='';
        str +=
          'name' + ',' +
          'pwd' + ',' +
          'school' + ',' +
          'age';
        //通过循环拿出data数据源里的数据，并塞到str中
        for (const i in data) {
          //如果是第一行,不换行
          str += '\n' +
            data[i].name + ',' +
            data[i].pwd + ',' +
            data[i].school + ',' +
            data[i].age
        }
        //Excel打开后中文乱码添加如下字符串解决
        let exportContent = "\uFEFF";
        let blob = new Blob([exportContent + str], {
          type: "text/plain;charset=utf-8"
        });
        //根据数据生成生成文件
        FileSaver.saveAs(blob, "demo.csv");
  }

4.写一个方法将csv文件导入生成数据读取:

 importData(e){
    const file = e.target.files[0];
    if (file) {
      let allResults=[];
      const reader = new FileReader();
      reader.readAsBinaryString(file);
      reader.onload = event => {
        let buf = event.target.result;
        const encodeType = jschardet.detect(buf).encoding;
        if (encodeType !== "UTF-8") {
          buf = encoding.convert(buf, "utf8", encodeType);
        }
        iconv.skipDecodeWarning = true;
        const text = iconv.decode(buf, "utf8");
        Papa.parse(text, {
            encoding: "UTF-8",
            complete: results => {
              for(let y=0;y<results.data.length;y++){
                // es6合并数组的语法
                allResults=[...allResults,results.data[y]]
              }
              //打印拿到的最终数据
             console.log(allResults)
            }
          }
        )
      }
    }
  }

5.写一个html的标签,基于react的绑定事件,绑定数据csv文件导入,accpet设置只选择csv文件:

<input type="file" accept=".csv" onChange={this.importData.bind(this)} />