导出Excel-不依赖后端

1. 在项目中路径中下载相关依赖（这里使用淘宝镜像）

   cnpm i js-export-excel
   

2. 在需要使用导出的js中引入

   import ExportJsonExcel from "js-export-excel";
   

3. 给导出按钮添加事件

    <Button type="primary" onClick={this.handleExport}>
                 导出
    </Button>
   

4. 处理函数

    //处理点击导出
     handleExport = () => {
       const data = this.state.exportData;     //table中要导出的数据用exportData这个状态来管理
       console.log(data);                     
       var option = {};
       let dataTable = [];
       if (data) {
         for (let i in data) { //table中的数据是个对象数组，每个对象有一个退保状态、姓名、学号等相关数据
           if (data) {
             let obj = {
               退保状态: data[i].TBZT,
               姓名: data[i].XM,
               学号: data[i].XH,
               性别: data[i].XB,
               学院: data[i].XY,
               专业: data[i].ZY,
               年级: data[i].NJ,
               班级: data[i].BJ,
               身份证号码: data[i].SFZHM,
               手机号: data[i].SJH,
               退保费: data[i].TBF,
               退保时间: data[i].TBSJ,
             };
             dataTable.push(obj);
           }
         }
       }
   
       option.fileName = "退保确认名单汇总";         //导出Excel的名字
       option.datas = [
         {
           sheetData: dataTable,
           sheetName: "sheet",
           sheetFilter: [
             "姓名",
             "学号",
             "性别",
             "学院",
             "专业",
             "年级",
             "班级",
             "身份证号码",
             "手机号",
             "退保费",
             "退保时间",
           ],
           sheetHeader:[
             "姓名",
             "学号",
             "性别",
             "学院",
             "专业",
             "年级",
             "班级",
             "身份证号码",
             "手机号",
             "退保费",
             "退保时间",
           ],
         },
       ];
       var toExcel = new ExportJsonExcel(option);
       toExcel.saveExcel();
     };
   

5. table列表中对应的相关数据

    const columns = [
         {
           title: "序号",
           width: "80px",
           dataIndex: "ROW_ID",
           sorter: (a, b) => a.ROW_ID.length - b.ROW_ID.length,
         },
         {
           title: "退保状态",
           width: "100px",
           dataIndex: "TBZT",
           searchType: "select",
         },
         {
           title: "姓名",
           width: "80px",
           dataIndex: "XM",
           searchType: "select",
           sorter: (a, b) => a.XM.length - b.XM.length,
         },
         {
           title: "学号",
           width: "130px",
           dataIndex: "XH",
           searchType: "input",
           sorter: (a, b) => a.XH.length - b.XH.length,
         },
         {
           title: "性别",
           width: "80px",
           dataIndex: "XB",
           searchType: "input",
           sorter: (a, b) => a.XB.length - b.XB.length,
         },
         {
           title: "学院",
           width: "160px",
           dataIndex: "XY",
           searchType: "datetime",
           sorter: (a, b) => a.XY.length - b.XY.length,
         },
         {
           title: "专业",
           width: "100px",
           dataIndex: "ZY",
           sorter: (a, b) => a.ZY.length - b.ZY.length,
         },
         {
           title: "年级",
           width: "80px",
           dataIndex: "NJ",
           searchType: "input",
           sorter: (a, b) => a.NJ.length - b.NJ.length,
         },
         {
           title: "班级",
           width: "80px",
           dataIndex: "BJ",
           searchType: "select",
           sorter: (a, b) => a.BJ.length - b.BJ.length,
         },
         {
           title: "身份证号码",
           width: "150px",
           dataIndex: "SFZHM",
           searchType: "input",
           sorter: (a, b) => a.SFZHM.length - b.SFZHM.length,
         },
         {
           title: "手机号",
           width: "100px",
           dataIndex: "SJH",
           searchType: "datetime",
           sorter: (a, b) => a.SJH.length - b.SJH.length,
         },
         {
           title: "退保费",
           width: "100px",
           dataIndex: "TBF",
           searchType: "datetime",
           sorter: (a, b) => a.TBF.length - b.TBF.length,
         },
         {
           title: "退保时间",
           width: "120px",
           dataIndex: "TBSJ",
           searchType: "datetime",
           sorter: (a, b) => a.TBSJ.length - b.TBSJ.length,
         },
         {
           title: "操作",
           dataIndex: "handle",
           // width: "180px",
           key: "handle",
           render: (record) => (
             <div>
               <Button type="link" onClick={this.showModal}>
                 退保确认
               </Button>
               <span>|</span>
               <Button type="link">查看学生申请</Button>
             </div>
           ),
         },
       ];