layui table 打印表格

本文转载自查看原文 2021-03-26 16:58 912 layui/ HTML/ ajax/ jquery

如题，layui 的表格打印的方式是将表格的数据重新组合成一个新页面，但是只能打印当前页面的内容，讲真不够用，找了一上午找了一些说是自己改的，但是都不满意，没什么用，还是只能打印当前页的内容，我的想法是写一个函数，传递显示的列和需要打印的数据，直接打印。就像某些同学要的那种打印全部数据吧。废话不多说了，直接上代码吧。

var cols = [[
                    {type: 'checkbox'}
                    ,{field:'id', title:'ID'}
                    ,{field:'title', title:'标题'}
                    ,{field:'short_title', title:'短标题'}
                    ,{field:'keyword', title:'关键字'}
                    ,{field:'seo_title', title:'seo标题'}
                    ,{field:'seo_keyword', title:'seo关键字'}
                    ,{field:'thumbnail', title:'缩略图'}
                    ,{field:'date', title:'显示时间'}
                    ,{field:'views', title:'观看次数'}
                    ,{field: 'sort', title:'排序'}
                    ,{field: 'create_time', title:'创建时间'}
                    ,{field: 'lb', title:'类别'}
                    ,{field: 'zhiding', title:'置顶'}
                    ,{title:'操作', toolbar: '#barDemo'}
                ]];
table.on('toolbar(table)',function(obj){
            if(obj.event == 'LAYTABLE_TIPS')(obj.event == 'print2'){
                $.ajax({
                    url:'/admin/articleAll',
                    type:'get',
                    success:res=>{
                        print(res,cols)
                    }
                })
            }
        })
function print (res,cols)
        {
            var v = document.createElement("div");
            var f = ["<head>", "<style>", "body{font-size: 12px; color: #666;}", "table{width: 100%; border-collapse: collapse; border-spacing: 0;}", "th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #666;}", "a{color: #666; text-decoration:none;}", "*.layui-hide{display: none}", "</style>", "</head>"].join("");
            thead = `<h1 style="text-align: center;">这是标题</h1><table><thead><tr>`
            for(let v2 of cols[0]){
                if((v2.type == 'checkbox') || v2.hasOwnProperty('toolbar')){
                    thead += `<th class="layui-table-col-special">空列</th>`
                }else{
                    thead += `<th>${v2.title}</th>`
                }
            }
            thead += `</tr></thead></table>`
            $(v).append(thead);
            var tr = `<tbody>`
            for(let v of res){
                tr += '<tr>'
                for(let v2 of cols[0]){
                    if((v2.type == 'checkbox') || v2.hasOwnProperty('toolbar')){
                        tr += `<td class="layui-table-col-special"></td>`
                    }else{
                        var field = v2.field ?? 'id'
                        tr += `<td>${v[field]}</td>`
                    }
                }
                tr += '</tr></tbody>'
            }
            $(v).find('tr').after(tr)
            $(v).find("th.layui-table-patch").remove();
            $(v).find(".layui-table-col-special").remove();
            var h = window.open("打印窗口", "_blank");
            h.document.write(f + $(v).prop("outerHTML"));
            h.document.close();
            h.print();
            h.close();
        }

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 layui打印表格自定义函数 layui打印表格自定义函数 js打印表格内容 Js打印表格时部分边框不显示（table 标签） C# PrintDocument 打印表格 vue 导出报表和打印表格 JS打印表格（HTML定义格式） js简单打印表格 LODOP打印表格错位的几种情况 html打印表格每页都有的表头和打印分页