一根烟时间写个导出功能

缘由

大家好， 最近公司在做一个类似医疗的项目，由于前端的开发人员有些许变故，而且公司暂时没有找到合适的前端开发人员。所以，前端开发的任务也落在了我们后端的身上。没办法，时间紧任务重，只能硬着头皮上了。

之前在刚开始的时候时候，我们是前后端不分离的，一直都是一个人来写。所以前端方面的知识我还是会一些的，所以当领导将任务下发下来的时候，不会说是“老虎吃天，无从下爪”。

在项目的整体开发过程当中基本上没有什么大的问题，但是客户提出了他们要统计数据，比如订单量的统计，会员数据信息的统计等，都需要一个下载EXCEL的功能。没办法呀！谁叫客户是上帝呢！我们只能遵从并且去完成了。

准备工作

因为我们之前的前端使用的是LayerUI框架，所以，也就懒得改了。我主要讲解并记录一下LayerUI框架的EXCEL导出功能。

首先，我平常使用的是VSCode进行开发，其他的前端开发工具也是可以的，根据个人喜好吧！

我们想开发EXCEL导出功能，那么得先引入相应的js插件，这里LayerUI官网已经给我们提供了。可以去LayerUI官网中的扩展组件去寻找并下载，我这里已经上传到百度云盘，需要的可以自取，layerui导出js

这里我们关于更多excel导出功能的文档，我们可以参考官方给我们提供的文档，这里我也将参考文档的地址提供出来，有需要的可以参考官方文档进行开发： LAY-EXCEL插件文档

开始测试

接下来我们就将下载好的excel.js文件导入到我们的项目当中，然后再要使用的html页面进行引入即可。

然后给我们的html页面加一个下载EXCEL文件的按钮。

现在到了代码部分了，我们利用excel.js给我们提供的方法，直接调用然后进行相应的设置就可以了。这边我已经是做好了的，所以直接将代码粘贴出来以供大家参考吧

<button id="exportList" class="layui-btn layui-bg-blue" style="margin-left: 100px; ><i class="layui-icon">&#xe601;</i>会员导出</button>

<script>
layui.use(function () {
	let laydate = layui.laydate;
	let table = layui.table,
		layer = layui.layer,
		form = layui.form;
		//这里很重要呦
		excel = layui.excel;

		

	//会员导出功能
	$('#exportList').on('click', function () {
		var urll = path + '/webAdmin/patient/userList';
		var dataw = {
				}
		$.axs1(urll, dataw, buildSuccess);
		function buildSuccess(data) {
					var 
					title = [						{patientId:'会员管理信息表'},						{							patientId:'会员编号',							patientName:'患者姓名',							patientPhone:'患者手机号码',							doctorName:'医生姓名',							wxOpenId:'opneId',							createTime:'创建时间',							updateTime:'更新时间'						}				],
					data = data.data,
					exportData = [];
				
					 //这里设置公共样式
					var	publicStyle = {
							font: {    sz: 12 },
							alignment: {
								vertical: "center",
								horizontal: "center"
							},
							border: {
								top: {style: 'thin', color: {rgb: '666666'}},
								bottom: {style: 'thin', color: {rgb: '666666'}},
								left: {style: 'thin', color: {rgb: '666666'}},
								right: {style: 'thin', color: {rgb: '666666'}}
							}
						}
						function getStyle(param){
						param = param || {};
						let tmpData = {};
						['patientId', 'patientName', 'patientPhone', 'doctorName', 'wxOpenId', 'createTime', 'updateTime'].forEach(item => {
							tmpData[item] = function(value, line, data){
								return {
									v: value,
									s: {
										...publicStyle,
										...param
									}
								}
							}
						});
						return tmpData;
					}
					//整理数据
					let titleList = excel.filterExportData((() => {
						let newArr = [];
						title.forEach(item => {
							let tmpData = {};
							['patientId', 'patientName', 'patientPhone', 'doctorName', 'wxOpenId', 'createTime', 'updateTime'].forEach(key => {
								
								if('undefined'===typeof item[key]){
									tmpData[key] = '';
								}else{
									tmpData[key] = item[key];
								}
							});
							newArr.push(tmpData);
						});
						return newArr;
					})(), getStyle({
						font: { sz: 12, bold: true }
					}));

					let dataList   =   excel.filterExportData(data,getStyle())
					 //标题
					exportData.push.apply(exportData, titleList);
					//会员数据
					exportData.push.apply(exportData, dataList);
					//合并单元格
					let mergeConf = LAY_EXCEL.makeMergeConfig([
						['A1', 'G1']
					]);
					//单元格列宽度设置
					let colConf = excel.makeColConfig({
						A:100,
						B:100,
						C:100,
						D:100,
						E:100,
						F:100,
						G:130
					});
					
					
					 //导出数据
					 excel.exportExcel(exportData, '会员信息管理.xlsx', 'xlsx', {
						extend: {
							'!merges': mergeConf,
							'!cols': colConf
						}
					});
					
				}
	})
	
	
	
	
		
	});
});
</script>

上述这些大概就是下载导出EXCEL功能的全部了那么我们接下来就尝试导出一下，看看实际效果如何

没问题，是我想要的效果。好了，今天的分享就到这里啦！感兴趣的赶紧去试试吧！

原文：https://juejin.cn/post/7389656666134478867