react文件导出 使用 js-export-excel 模块

使用 js-export-excel    （可以导出多张sheet表）

首先安装 js-export-excel  ： yarn add js-export-excel 

在这里我遇到一个错误 就是下载包之后启动项目报错 我们只需要把str下.umi删除之后在下载这个包就可以了

代码部分

import { Table } from 'antd';
import { columns } from './config';
import ExportJsonExcel from "js-export-excel";
import { PlusCircleOutlined } from '@ant-design/icons';
 
function Tables(props) {
  const { isLoading, viewData, data } = props;
  // data格式
  const data1 = [
    {
      adID: "张三",
      leaveCount: 26,
      leaveDuration: 82,
      leaveType: "调休",
      name: "张三"
    },
    {
      adID: "张三1",
      leaveCount: 526,
      leaveDuration: 82,
      leaveType: "调休",
      name: "张三1"
    },
    {
      adID: "张三1",
      leaveCount: 26,
      leaveDuration: 852,
      leaveType: "调休",
      name: "张三1"
    },
    {
      adID: "张三1",
      leaveCount: 256,
      leaveDuration: 82,
      leaveType: "调休",
      name: "张三1"
    },
  ]
  /**
   *  导出数据
   */
  const handleExportCurrentExcel = (data) => {
    let sheetFilter = ["name", "leaveType", "leaveCount", "leaveDuration"];
    let sheetFilter2 = ["name", "leaveType", "leaveCount", "leaveDuration"];
    let option = {};
    option.fileName = '考勤分析结果';
    option.datas = [
      {
        sheetData: data1, //导出的数据
        sheetName: '考勤分析结果', //sheet页名字
        sheetFilter: sheetFilter,           //
        sheetHeader: ['姓名', '类型', '次数', '时长'],  //表格头部的标题
        columnWidths: [10, 10, 10, 10]
      },
      {
        sheetData: data1,  //比较懒得造数据了  跟表1数据一样
        sheetName: '考勤分析结果222',
        sheetFilter: sheetFilter2,
        sheetHeader: ['姓名22', '类型22', '次数22', '时长22'],
        columnWidths: [10, 10, 10, 10]
      },
    ];
    var toExcel = new ExportJsonExcel(option); //new
    toExcel.saveExcel(); //保存
  }
 
  return (
    <div>
      <div className='exportButton' onClick={() => handleExportCurrentExcel(data)}>
        <PlusCircleOutlined className='icon-but' />
        导出当前数据
      </div>
      <Table
        loading={isLoading}
        columns={columns}
        dataSource={viewData}
        pagination={false}
      />
    </div>
  )
}