zoukankan      html  css  js  c++  java
  • layui 学习笔记(四) 复杂表头前台Excel导出

    layui - excel 复杂表头导出- 第三方插件实现

    参考:https://fly.layui.com/extend/excel/
    演示:http://excel.wj2015.com/

       http://excel.wj2015.com/_book/docs/%E5%87%BD%E6%95%B0%E5%88%97%E8%A1%A8/%E5%AF%BC%E5%87%BA%E7%9B%B8%E5%85%B3%E5%87%BD%E6%95%B0.html
      

    开始:

      码云地址下载插件:https://gitee.com/wangerzi/layui-excel
      并引入excel.js或excel.min.js 可以参考index.js里写的复杂表头

    table.render({
            elem: '#demo',
            url: 接口url,//数据接口
            title: 'test',
            limit: 10,
            cols: [[
                 {field: 'name', title:'姓名', rowspan: 2,100}
                ,{field: 'age', title: '年龄', rowspan: 2,100}
                ,{align: 'center',field: 'cs1',title: '测试合并1', colspan: 2} 
                ,{align: 'center',field: 'cs2',title: '测试合并2', colspan: 2}
            ],[
                {align: 'center', field: 'a1',title: '合并1'} 
                ,{align: 'center',field: 'a2', title: '合并2'}
                ,{align: 'center',field: 'a3', title: '合并3'}
                ,{align: 'center',field: 'a4', title: '合并4'}
            ]],
            done: function (res, curr, count) {
                var exportData = res.data;
                exportMe(exportData);
            }
     });
     
     
     function exportMe(data){
            // 把表头放到data里
            data.unshift({a1:'1',a2:'2',a3:'3',a4:'4'});
            data.unshift({name:'姓名',age:'年龄',a1:'测试合并1',a2:'',a3:'测试合并2',a4:''}); 
            // 配置合并单元格
            var mergeConf = LAY_EXCEL.makeMergeConfig([
                ['C1', 'D1'],
                ['E1', 'F1'],
                ['A1', 'A2'],
                ['B1', 'B2']
            ])
            // 2. 配置 列宽 C列宽 150,E列宽150,默认80
            var colConf = LAY_EXCEL.makeColConfig({
                'C': 150,
                'E': 150,
            }, 80)
            // 3. 第1行行高40,第二行行高30,默认20
            var rowConf = LAY_EXCEL.makeRowConfig({
                1: 40,
                3: 30
            }, 20)
            LAY_EXCEL.exportExcel({
                sheet1: data
            }, '测试导出复杂表头.xlsx', 'xlsx', {
                extend: {
                    // extend 中可以指定某个 sheet 的属性,如果不指定 sheet 则所有 sheet 套用同一套属性
                    sheet1: {
                        '!merges': mergeConf
                        , '!cols': colConf
                        , '!rows': rowConf
                    }
                }
            });
        }

    @

    -------博客内容仅用于个人学习总结-------
  • 相关阅读:
    8.Nginx常用基础模块
    7.Web基础之Nginx
    6.Web基础之http协议
    5.SSH远程服务
    4.Sersync实时同步
    3.NFS 共享存储
    前端-CSS
    前端-HTTP
    MySQL-其他知识点
    MySQL-pymysql模块
  • 原文地址:https://www.cnblogs.com/DarGi2019/p/12221238.html
Copyright © 2011-2022 走看看