Bootstrap

前端导出Excel合并单元格

  • 最近有需要前端导出Excel,涉及到复杂表格单元格合并和样式调整,在网上看了很多插件,选用了LAY-EXCEL,虽然是基于layui封装的,但是任何框架也是适用的。http://excel.wj2015.com/_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,默认80
  let colConf = LAY_EXCEL.makeColConfig(colWidth, 80)
  // 3. 第1行行高40,第二行行高30,默认20
  let 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:'2022-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)
;