缘由

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

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

在项目的整体开发过程当中基本上没有什么大的问题，但是客户提出了他们要统计数据，比如订单量的统计，会员数据信息的统计等，都需要一个下载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功能的全部了。好了，今天的分享就到这里啦！感兴趣的赶紧去试试吧！