react 导出数据到Excel

首先 第一件事先下载插件

npm install js-export-excel

第二件事 在你想要导出数据的组件中引入插件

import ExportJsonExcel  from 'js-export-excel';

官方推荐使用的是json数据格式 然后我这边也写了一下试了试

1. 这里拿出其中的一组数据展示 ，这是一个json数据结构
2. 在这一组数据中可以看到他是一个多层结构的数据
3. 也就是说你在遍历一层数据的时候也要想到怎么处理第二层数据
4. 我的处理方法简单粗暴

const data = [
        {
            id: '75546',					//每个数据的独立标识
            courseTitle: '20210818',		//班期名称
            classNumber: '3',				//班级数量
            status: '开启',					//当前状态是否开启
            SellingTime: [					//可售卖时间
                {startTime:'2021-7-20'},	//可售卖开始时间
                {endTime:'2021-7-25'},		//可售卖结束时间
            ],
            creator: '看小旭暗示法',			//创建班期人的名称
            creatorTime: '2021-7-20',		//创建班期的日期
            tags: [							//操作方法
                { "bian": "编辑" },			//操作编辑
                { "guan": "关闭" },			//操作关闭
                { "shan": "删除" },			//操作删除
                { "kaii": "开启" },			//操作开启
            ]
        }
   	]

这是将数据渲染到页面的效果 使用的是antd ui库

展示实现导出的代码 ， 不要看着有点多，其实很少，就是写的有点麻烦

1. 首先是点击事件代码展示

	<Button onClick={handleExport} type="primary" className='btn3' icon="download">导出订单</Button>
	

2. 然后是点击之后，如何将数据导出到Excel

//切记看清楚，我这边使用的是函数式组件，如果使用的是类组件的话别忘了修改一下
function handleExport(){ //导出Excel
        let option = {}
        let datatable = []; //用于接受数据
        if(data){			//这个data 就是上面那一组数据
            data.forEach(item => {	//开始渲染数据
                let kaii = [];	//这是开启
                let bian = [];	//这是编辑
                let shan = [];	//这是删除
                let guan = [];	//这是关闭
                let startTime = [];	//这是 可售卖开始时间
                let endTime = [];	//这是  可售卖结束时间
                item.SellingTime.map(items=>{	     	//这是在遍历可售卖时间
                    startTime.push(items.startTime);	//获得里面的可售卖开始时间
                    endTime.push(items.endTime)			//获得里面的可售卖结束时间
                })
                item.tags.map(items=>{ 					//这是在遍历操作方法
                    kaii.push(items.kaii);				//获得里面的开启操作
                    bian.push(items.bian);				//获得里面的编辑操作
                    shan.push(items.shan);				//获得里面的删除操作
                    guan.push(items.guan)				//获得里面的关闭操作
                })
                let kai = String(kaii.filter(kai=>kai == '开启')) //因为操作中有四个方法，只需要获取其中符合条件的，所以需要过滤一下， 然后再转成字符串
                let bia = String(bian.filter(bia=>bia == '编辑'))
                let sha = String(shan.filter(sha=>sha == '删除'))
                let gua = String(guan.filter(gua=>gua == '关闭'))
                let str = String(startTime.filter(start=>!start == '')) //可售卖开始时间
                let end = String(endTime.filter(end=>!end == ''))		//可售卖结束时间
                let obj = {								//以一个对象的方式 添加到 datatable 中 （datatable 上面定义的一个空数组）
                    id:item.id,						//每个数据的独立标识
                    courseTitle:item.courseTitle,	//班期名称
                    classNumber: item.classNumber,	//班级数量
                    status: item.status, 			//当前状态是否开启
                    startTime: str,					//可售卖开始时间
                    endTime: end,					//可售卖结束时间
                    creator: item.creator,			//创建班期人的名称
                    creatorTime: item.creatorTime,	//创建班期的日期
                    kaii: kai,						//操作 开启方法
                    bian: bia,						//操作 编辑方法
                    shan: sha,						//操作 删除方法
                    guan: gua,						//操作 关闭方法
                }
                datatable.push(obj);				//将处理好的数据添加到 datatable 中 （datatable 上面定义的一个空数组）
            });
        }
        option.fileName = '班期数据统计' 			//导出的Excel表格名称
        option.datas = [
            {
                sheetData:datatable,				//json 数据（datatable 上面定义的一个空数组）
                sheetName:'sheet',
                sheetHeader:['班级ID','班期名称','班级数','状态','可售卖开始时间','可售卖结束时间','创建人','创建时间','编辑','开启','关闭','删除'],//这是导出Excel表格的第一行
                sheetFilter:['id','courseTitle','classNumber','status','startTime','endTime','creator','creatorTime','bian','kaii','guan','shan'],//这是底下分别对应的数据
                columnWidths: [5,5,5,5,10,10,5,5,5,5,5,5],	//这是表格的宽，想知道的话谁便修改一个就知道了。
            }
        ]
        let toExcel = new ExportJsonExcel(option)
        toExcel.saveExcel();
    };

这个前端写导出，在项目中是不推荐的，这个导出正常都是由后端的同志们写的。

前端写这个导出只会导出第一页的数据，所以当个练习就行。