最近有需要前端导出Excel，涉及到复杂表格单元格合并和样式调整，在网上看了很多插件，选用了LAY-EXCEL，虽然是基于layui封装的，但是任何框架也是适用的。/_book/安装npm i lay-excel，引入import LAY_EXCEL from ‘lay-excel’;使用注意点：数据的顺序我封装了一个方法，代码如下
/** 封装方法*@param data 表格数据(json)*@param merges 合并单元格(二维数组)*@param fileName 文件名*@param colWidth 设置列宽(对象)*@param rowHeigh 设置行高(对象)*@param field 设置样式的范围(字符串)*@param cellstyle 设置样式（对象）**/export function excel(data,merges,fileName,colWidth,rowHeigh,field,cellstyle){// 1.配置合并单元格let mergeConf = LAY_EXCEL.makeMergeConfig(merges)// 2. 配置 列宽 C列宽 150，E列宽150，默认80let colConf = LAY_EXCEL.makeColConfig(colWidth, 80)// 3. 第1行行高40，第二行行高30，默认20let rowConf = LAY_EXCEL.makeRowConfig(rowHeigh, 25)//4.配置表格样式，其属性参考官方文档let cellstyle1 = cellstyle?cellstyle:{s: {alignment: {horizontal: 'center',vertical: 'center'}}}LAY_EXCEL.setExportCellStyle(data, field+data.length, cellstyle1);LAY_EXCEL.exportExcel({sheet1: data}, fileName, 'xlsx', {extend: {// extend 中可以指定某个 sheet 的属性，如果不指定 sheet 则所有 sheet 套用同一套属性sheet1: {'!merges': mergeConf, '!cols': colConf, '!rows': rowConf}}});},//调用列子Exportexcel(){let list = [{title:'我是标题',date:'',month1:'',month2:'',month3:'',month4:''},{title:'内容',date:'周期',month1:'-12-14',month2:'',month3:'',month4:''},{title:'xx内容',date:'天',month1:'√',month2:'√',month3:'√',month4:'√'}];let fileName = '复杂表头测试'let merges = [['A1', 'F1']];//表头合并let colWidth = {'A': 100, 'B': 100};let rowHeigh = {1: 40,3: 25};let field = 'A1:F';this.$excel(list,merges,fileName,colWidth,rowHeigh,field)
如果觉得《前端导出Excel合并单元格》对你有帮助，请点赞、收藏，并留下你的观点哦！
