分类导航

程序笔记发布时间：2022-07-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了layui table 导出，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

1.引入layui.excel插件

Github: https://github wangt.cc /wangerzi/layui-excel码云： https://gitee wangt.cc /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 wangt.cc /extend/excel/