纯前端实现表格的导出

一、由于公司项目需要,需要将表格数据导出为EXCEL表格数据。

环境React+Ant Design

现在做程序开发，都是以实现功能为目标，能用的插件很多，这里，我用到了js-export-excel第三方插件

二、安装插件js-export-excel

npm add js-export-excel

当然你也可以用yarn安装，这样安装更快，但前提是要以管理员身份执行

三、代码实现

直接上代码，

安装完了，我们在需要用到的组件页面里面引入该插件

import ExportJsonExcel from 'js-export-excel';

下载事件：

 return (
    <div>
       <Button onClick={this.downloadExcel}>导出Excel表格</Button>
    </div>
)

调用：

downloadExcel = () => {
const data = this.state.data ? this.state.data : '';//表格数据
  var option={};
  let dataTable = [];
  if (data) {
    for (let i in data) {
      if(data){
        let obj = {
          '姓名': data[i].name,
          '年龄': data[i].age,
          '性别': data[i].sex,
        }
        dataTable.push(obj);//这里是你要把你的表格数据组装一下，（表头名称：表格数据）
      }
    }
  }
  option.fileName = '表格的文件名称'
  option.datas=[
    {
      sheetData:dataTable,//表格数据
      sheetName:'sheet',//表名称
      sheetFilter:['姓名','年龄','性别'],//表头
      sheetHeader:['姓名','年龄','性别'],//表头
    }
  ];

  var toExcel = new ExportJsonExcel(option); //创建实例
  toExcel.saveExcel();//导出        
}

好了，导出就是这么简单，哈哈