reactjs前端数据导出

本篇总结了reactjs项目中将表格数据导出为csv文件的方法。

引用插件：

npm install file-saver --save

或

bower install file-saver

（file-saver git地址：https://github.com/eligrey/FileSaver.js ）

使用插件导出文件

//引用插件
import FileSaver from 'file-saver';

//方法调用
exportList = (data) => {
    //str:table的每一列的标题，即为导出后的csv文件的每一列的标题
    let str = '标题1,标题2,标题3';
    //通过循环拿出data数据源里的数据，并塞到str中
    for (const i in data) {
      str += '\n' + data[i].name + ',' +
        data[i].id + ',' +
        data[i].type
    }
    //Excel打开后中文乱码添加如下字符串解决
    let exportContent = "\uFEFF";
    let blob = new Blob([exportContent + str], {
      type: "text/plain;charset=utf-8"
    });
    FileSaver.saveAs(blob, "List.csv");
  };