• layui table 导出


    1.引入layui.excel插件

    Github: https://github.com/wangerzi/layui-excel
    码云: https://gitee.com/wangerzi/layui-excel

    2.导出函数

    //data: 表格数据
    function ExportExcel(data) {
      //整理需要导出的数据字段
      jsort=["name", "age"];
      data = excel.filterExportData(data, jsort);
      
       //或者
     data = excel.filterExportData(data, {
                    name: function (value) {
                        return {
                            v: value,
                            s: { //样式
                                alignment: {
                                    horizontal: 'center',
                                    vertical: 'center'
                                }
                            }
                        }
                    }
                   ,age: function (value) {
                        return {
                            v: value,
                            s: { 
                                alignment: {
                                    horizontal: 'center',
                                    vertical: 'center'
                                }
                            }
                        }
                    }
          });  
    
        //表头整理
         var head={
              name: {
                  v: "名称" //显示的表头
                   ,s: {//单元格样式
                          alignment: {
                              horizontal: 'center',  //水平居中
                              vertical: 'center'      //上下居中
                           } 
                          ,font: { color: { rgb: '333' } } //字体
                      }
                }
                ,age: {
                  v: "年龄" //显示的表头
                   ,s: {//单元格样式
                          alignment: {
                              horizontal: 'center',  //水平居中
                              vertical: 'center'      //上下居中
                           } 
                          ,font: { color: { rgb: '333' } } //字体
                      }
                }
          };
    
        data.unshift(head);
    
         //可以在第一行增加标题栏
         let t_head = {
                    name: {
                        v: "测试表格", //标题
                        s: {
                            alignment: {
                                horizontal: 'center',
                                vertical: 'center'
                            }
                            , font: {
                                color: { rgb: 'ff5621' }
                            }
                        }
                    }
                };
         data.unshift(t_head);
    
         let marks = [['A1', 'D1']]; //合并标题栏,可根据表格列数进行合并
    
         //其他单元格合并
         // marks.push(['A2', 'A5']);
         // marks.push(['D2', 'F2']);
         //合并函数
         var mergeConf = excel.makeMergeConfig(marks);
    
           //设置列宽
                var colConf = excel.makeColConfig({
                    'A': 180,
                    'B': 130,
                }, 120);
    
                //设置行高
                var rowConf = excel.makeRowConfig({
                    1: 30
                    , 2: 25
                }, 20);
    
                //边框(不能超过该行列数或该列的行数)
                //excel.setRoundBorder(data, 'A1:C1', {
                //    top: { style: 'thick', color: { rgb: 'ff5621' } },
                //    bottom: { style: 'thick', color: { rgb: 'ff5621' } },
                //    left: { style: 'thick', color: { rgb: 'ff5621' } },
                //    right: { style: 'thick', color: { rgb: 'ff5621' } }
                //});
          
         //导出
          excel.exportExcel(data, 'test.xlsx', 'xlsx', {
                    extend: {
                        '!merges': mergeConf
                        , '!cols': colConf
                        , '!rows': rowConf
                    }
                });
    }     
    

      

    3.调用:

    var data = layui.table.cache["tbl_id"];
    ExportExcel(data);
    
    
    ****注意在开头要加入layui.excel
    var layer = layui.layer
         , form = layui.form
         , table = layui.table
         , excel = layui.excel
         , $ = layui.jquery; 
    

      

    更多参考来源:https://fly.layui.com/extend/excel/

      

  • 相关阅读:
    三、Nginx配置文件说明
    Nginx配置文件说明
    二、Nginx离线安装
    一、Nginx简述
    yum 下载全量依赖 rpm 包及离线安装(终极解决方案)
    Java注解
    windows常用运行命令和dos命令
    MySQL学习记录一之存储引擎篇
    查询某条数据的上一条和下一条数据的Sql语句
    Single Number II
  • 原文地址:https://www.cnblogs.com/easter729/p/14960269.html
Copyright © 2020-2023  润新知