打印功能的实现往往是新建一个页面，然后在新建页面中画出你想要的效果，然后调用浏览器的打印功能进行打印
项目依赖：
layuijquery记得换layui和jquery引入路径
完整项目代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>layui打印</title><link rel="stylesheet" href="layui/css/layui.css" media="all" /></head><body class="layui-bg-gray"><div style="margin: 20px;"><div class="layui-card"><div class="layui-card-body"><button type="button" class="layui-btn layui-btn-normal"onclick="print('test')">layui自定义打印表格</button><button id="printSelect" type="button" class="layui-btn layui-btn-normal">自定义打印</button></div></div><div class="layui-card"><div class="layui-card-body"><table class="layui-hide" id="test" lay-filter="test"></table></div></div><script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button><button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button><button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button></div></script><script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></script></div></body><script src="js/jquery-1.9.1.min.js"></script><script src="layui/layui.js"></script><script>layui.use('table', function() {var table = layui.table;table.render({elem: '#test',data: [{"id": "10001","username": "张三","email": "189461@","sex": "男","city": "广西南宁","sign": "海内存知己，天涯若比邻","experience": "116","ip": "192.168.1.26","logins": "666","joinTime": "-02-22"}, {"id": "10002","username": "李四","email": "189461@","sex": "男","city": "广西贵港","sign": "海内存知己，天涯若比邻","experience": "12","ip": "192.168.1.26","logins": "106","joinTime": "-02-22",}, {"id": "10003","username": "王五","email": "189461@","sex": "男","city": "广西玉林","sign": "海内存知己，天涯若比邻","experience": "65","ip": "192.168.1.26","logins": "106","joinTime": "-02-22"}, {"id": "10004","username": "玛卡巴卡","email": "189461@","sex": "女","city": "广西百色","sign": "海内存知己，天涯若比邻","experience": "666","ip": "192.168.1.26","logins": "106","joinTime": "-02-22"}, {"id": "10005","username": "老五","email": "189461@","sex": "男","city": "广西","sign": "海内存知己，天涯若比邻","experience": "86","ip": "192.168.1.26","logins": "106","joinTime": "-02-22"}, {"id": "10006","username": "老六","email": "189461@","sex": "男","city": "广西","sign": "海内存知己，天涯若比邻","experience": "12","ip": "192.168.1.26","logins": "106","joinTime": "-02-22"}, {"id": "10007","username": "老七","email": "189461@","sex": "男","city": "广西","sign": "海内存知己，天涯若比邻","experience": "16","ip": "192.168.1.26","logins": "106","joinTime": "-02-22"}, {"id": "10008","username": "老八","email": "189461@","sex": "男","city": "广西","sign": "海内存知己，天涯若比邻","experience": "106","ip": "192.168.1.26","logins": "106","joinTime": "-02-22"}],toolbar: '#toolbarDemo',title: '用户数据表',totalRow: true,cols: [[{type: 'checkbox',fixed: 'left'}, {field: 'id',title: 'ID',width: 80,fixed: 'left',unresize: true,sort: true,totalRowText: '合计'}, {field: 'username',title: '用户名',width: 120,edit: 'text'}, {field: 'email',title: '邮箱',width: 150,edit: 'text',templet: function(res) {return '<em>' + res.email + '</em>'}}, {field: 'experience',title: '积分',width: 80,sort: true,totalRow: true}, {field: 'sex',title: '性别',width: 80,edit: 'text',sort: true}, {field: 'logins',title: '登入次数',width: 110,sort: true,totalRow: true}, {field: 'sign',title: '签名'}, {field: 'city',title: '城市',width: 100}, {field: 'ip',title: 'IP',width: 120}, {field: 'joinTime',title: '加入时间',width: 120}, {fixed: 'right',title: '操作',toolbar: '#barDemo',width: 150}]],page: true});//工具栏事件table.on('toolbar(test)', function(obj) {var checkStatus = table.checkStatus(obj.config.id);switch (obj.event) {case 'getCheckData':var data = checkStatus.data;layer.alert(JSON.stringify(data));break;case 'getCheckLength':var data = checkStatus.data;layer.msg('选中了：' + data.length + ' 个');break;case 'isAll':layer.msg(checkStatus.isAll ? '全选' : '未全选')break;};});});/** layui打印表格自定义函数*/function print(tablelayid) {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("");$(v).append($(".layui-table-box").find(".layui-table-header").html());$(v).find("tr").after($("[lay-id=\"" + tablelayid + "\"] .layui-table-body.layui-table-main table").html());$(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();}/* 监听打印选中行按钮 */$('#printSelect').click(function() {layui.use(['table', 'layer'], function() {var table = layui.table,layer = layui.layer;var checkStatus = table.checkStatus('test')console.log(checkStatus)// 判断是否选中数据if (checkStatus.data.length === 0) {layer.msg('请选择数据', {icon: 2})} else {printSelect(checkStatus.data)}})})/* * [自定义打印选中行数据]* @param {[type]} allData [传入选中行]*/function printSelect(allData) {//用于包含内容var v = document.createElement("div");//页面头部，导入css ，media="print"表示打印时使用该样式var f = ["<head>", "<style>", "div{font-size:16px;}", ".main{width:100%;height:100%}",".main div{width:300px;margin-right: 50px;display:inline-block;}", "</style>", "</head>"].join("");var contentHtml = "";for (let i = 0; i < allData.length; i++) {var data = allData[i]var template ="<div class='main'>" +"<div>ID:" + data.id + "</div>" +"<div>用户名:" + data.username + "</div><br><br>" +"<div>邮箱:" + data.email + "</div>" +"<div>积分:" + data.experience + "</div><br><br>" +"<div>性别:" + data.sex + "</div>" +"<div>登录次数:" + data.logins + "</div><br><br>" +"<div>签名:" + data.sign + "</div>" +"<div>城市:" + data.city + "</div><br><br>" +"<div>IP:" + data.ip + "</div>" +"<div>加入时间:" + data.joinTime + "</div><br><br>" +"</div>"contentHtml += template;}//contentHtml为已拼凑好的内容$(v).append(contentHtml)//新建窗口var h = window.open("打印窗口", "_blank");//写入拼凑内容h.document.write(f + $(v).prop("outerHTML"));//调用打印h.print();//关闭页面h.close();}</script></html>
