vueelementUi导出excel表格功能实现日常业务，我们经常会遇到excel导出功能，如何使用呢？Excel的导入导出依赖js-xlsx来实现。在js-xlsx的基础上封装了Export2Excel.js，方便数据导出。安装excel和按需加载需要依赖因为Export2Excel不仅依赖js-xlsx，还依赖file-saver和script-loader。所以需要先安装如下命令：npminstallxlsxfile-saver-Snpminstallscript-loader-S-D由于js-xlsx体积还是很大，导出功能不是很常用的功能，所以建议在使用延迟加载时使用它。使用方法如下：import('@/vendor/Export2Excel').then(excel=>{excel.export_json_to_excel({header:tHeader,//表头需要数据，//需要具体数据filename:'excel-list',//非必填autoWidth:true,//非必填bookType:'xlsx'//非必填})})excel导出参数介绍vue-element-admin提供导出函数模块参数参数描述类型可选值默认值header导出数据的表头Array/[]data导出的具体数据Array/[[]]filename导出的文件名String/excel-listautoWidth单元格是否自适应宽度Booleantrue/falsettruebookType导出的文件类型Stringxlsx、csv、txt、morexlsxexcel导出基本结构。对我们来说最重要的是将表头与数据对应起来。因为数据中的key是英文的，如果要导出中文的表头，需要将中英文转换做相应的constheaders={'手机号码':'手机','姓名':'用户名','工号':'workNumber',}然后，完成导出代码//导出excel数据exportData(){//做操作//表头对应constheaders={'name':'用户名','手机number':'mobile','jobnumber':'workNumber',}//延迟加载import('@/vendor/Export2Excel').then(asyncexcel=>{const{rows}=awaitgetEmployeeList({page:1、size:this.page.total})constdata=this.formatJson(headers,rows)excel.export_json_to_excel({header:Object.keys(headers),data,filename:'员工信息表',autoWidth:true,bookType:'xlsx'})})},//该方法负责将数组转化为二维数组formatJson(headers,rows){//先遍历数组//[{username:'张三'},{},{}]=>[['张三'],[],[]]returnrows.map(item=>{returnObject.keys(headers).map(key=>{if(headers[key]==='timeOfEntry'||headers[key]==='correctionTime'){returnformatDate(item[headers[key]])//返回格式化前的时间}elseif(headers[key]==='formOfEmployment'){varen=EmployeeEnum.hireType.find(obj=>obj.id===item[headers[key]])returnen?en.value:'Unknown'}returnitem[headers[key]]})//=>["张三","13811","2018","1","2018","10002"]})}导出时间格式处理formatJson(headers,rows){returnrows.map(item=>{//item是一个对象{mobile:132111,username:'张三'}//["手机号","姓名","工作日期".]returnObject.keys(headers).map(key=>{//需要判断的字段if(headers[key]==='timeOfEntry'||headers[key]==='correctionTime'){//格式日期返回formatDate(item[headers[key]])}elseif(headers[key]==='formOfEmployment'){constobj=EmployeeEnum.hireType.find(obj=>obj.id===item[headers[key]])returnobj?obj.value:'Unknown'}returnitem[headers[key]]})//["132",'张三','','',''d]})//returnrows.map(item=>Object.keys(headers).map(key=>item[headers[key]]))//需要处理时间格式问题}复杂表头导出时扩展需要导出，此时vue-element-admin也支持这种操作。vue-element-admin提供的导出方法有multiHeader和merges参数。参数说明类型可选值默认值multiHeader复杂表头的一部分Array/[[]]merges需要合并的部分Array/[]multiHeader是一个二维数组，其中一个元素是一行表头。假设你想得到如图所示的结构。mutiHeader应该定义为constmultiHeader=[['name','maininformation','','','','','Department']]multiHeader中一个行表头的字段数需要相等到实际列数。如果你想跨列，额外的空间需要定义为空字符串，主要对应标准头constheader=['姓名','手机号码','入职日期','就业形式','转正日期','工号','department']如果我们要达到合并的效果，我们需要设置合并选项constmerges=['A1:A2','B1:F1','G1:G2']合并的顺序是可以的，只要配置好这两个属性，就可以导出复杂表头的excel了','就业形式':'formOfEmployment','转换日期':'correctionTime','工号':'workNumber','department':'departmentName'}//exportexcelimport('@/vendor/Export2Excel').then(asyncexcel=>{//excel是导入文件的导出对象//导出头从哪里来//数据从哪里来//现在没有接口获取所有数据//获取员工的界面页码以及每页的行数100110000const{rows}=awaitgetEmployeeList({page:1,size:this.page.total})constdata=this.formatJson(headers,rows)//返回的数据是要导出的结构constmultiHeader=[['姓名','主要信息','','','','','部门']]constmerges=['A1:A2','B1:F1','G1:G2']excel.export_json_to_excel({header:Object.keys(headers),data,filename:'employeeinformationtable',multiHeader,//复杂的头部合并//合并选项})})},//将头部数据与数据匹配//[{}]=>[[]]formatJson(headers,rows){returnrows.map(item=>{//item是一个对象{mobile:132111,username:'张三'}//["手机号",“姓名”,“入职日期”。]returnObject.keys(headers).map(key=>{//需要判断的字段if(headers[key]==='timeOfEntry'||headers[key]==='correctionTime'){//格式日期返回formatDate(item[headers[key]])}elseif(headers[key]==='formOfEmployment'){constobj=EmployeeEnum.hireType.find(obj=>obj.id===item[headers[key]])returnobj?obj.value:'Unknown'}returnitem[headers[key]]})//["132",'张三','','',''d]})//returnrows.map(item=>Object.keys(headers).map(key=>item[headers[key]]))//需要处理时间格式问题}以上是前端导出处理卓越的。综上，我们然后就可以来我们项目了，第四版js提升链接：https://pan.baidu.com/s/18P8k...可以加公众号获取提取码。有不懂的地方欢迎加q群147936127交流或vx：ltby52119，谢谢~
