layui 复杂表头多层表头的表格数据非后台导出excel

最新推荐文章于 2025-03-28 11:22:56 发布

poetry-code

最新推荐文章于 2025-03-28 11:22:56 发布

阅读量1.4w

点赞数 22

分类专栏： layui 文章标签： layui table export excel 复杂表头

本文链接：https://blog.csdn.net/weixin_45237517/article/details/100119628

版权

用过layui table的都了解，layui的表格自带导出功能，只要在属性toolbar里配置即可。
如果嫌toolbar里的导出按钮不够美观，layui也友好的提供了自行定义按钮后调用导出页面数据的方法，详见：官方文档
遗憾的是:该方法暂时并不支持对多层表头的导出。
而多层复杂表头在很多系统中都有体现，而若不想通过后台代码去做导出，只在前端页面上该如何做呢？

1 史前

1.1 直接使用（两种方式）

1.下载插件：
地址：github table2excel
下载下来项目后，在项目的dist中就有该js，在自己表格html页面引用即可使用。

链接：百度云下载js
提取码：1f52

/**
 * 使用方法该js的方法（两行代码）
 */
let table2excel = new Table2Excel();
// 传入你的tableId即可导出
table2excel.export($('#tableId'), "your filename");

一个解析页面元素方法：复制走即可使用

/**
 * 
 * @param id：表格的id
 * @param fileName:导出的excel的名字
 */
 function  exportForExcle(id,fileName){
   
        var table = $(document.getElementById(id)).clone();
        table.attr('id','datatab');
        table.appendTo('body');
        method5('datatab');
        datatab.remove();
        function method5(tableid) {
   
            var idTmr;
            var tableToExcel = (function() {
   
                var uri = 'data:application/vnd.ms-excel;base64,',
                    template = '<html><head><meta charset="UTF-8"></head><body><table border="1px">{table}</table></body></html>',
                    base64 = function(s) {
    return window.btoa(unescape(encodeURIComponent(s))) },
                    format = function(s, c) {
   return s.replace(/{(\w+)}/g, function(m, p) {
    return c[p]; }) }
                return function(table, name) {
   
                    if (!table.nodeType) table = document.getElementById(table)
                    var ctx = {
   worksheet: name || 'Worksheet', table: table.innerHTML}
                    var aTag = document.createElement('a');
                    aTag.download = fileName;
                    aTag.href = uri + base64(format(template, ctx));
                    document.body.appendChild(aTag);
                    aTag.onclick = function () {
   
                        document.body.removeChild(aTag);
                    }
                    aTag.click

最低0.47元/天解锁文章