打印功能的实现往往是新建一个页面，然后在新建页面中画出你想要的效果，然后调用浏览器的打印功能进行打印
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": "[email protected]",
"sex": "男",
"city": "广西南宁",
"sign": "海内存知己，天涯若比邻",
"experience": "116",
"ip": "192.168.1.26",
"logins": "666",
"joinTime": "2022-02-22"
}, {
"id": "10002",
"username": "李四",
"email": "[email protected]",
"sex": "男",
"city": "广西贵港",
"sign": "海内存知己，天涯若比邻",
"experience": "12",
"ip": "192.168.1.26",
"logins": "106",
"joinTime": "2022-02-22",
}, {
"id": "10003",
"username": "王五",
"email": "[email protected]",
"sex": "男",
"city": "广西玉林",
"sign": "海内存知己，天涯若比邻",
"experience": "65",
"ip": "192.168.1.26",
"logins": "106",
"joinTime": "2022-02-22"
}, {
"id": "10004",
"username": "玛卡巴卡",
"email": "[email protected]",
"sex": "女",
"city": "广西百色",
"sign": "海内存知己，天涯若比邻",
"experience": "666",
"ip": "192.168.1.26",
"logins": "106",
"joinTime": "2022-02-22"
}, {
"id": "10005",
"username": "老五",
"email": "[email protected]",
"sex": "男",
"city": "广西",
"sign": "海内存知己，天涯若比邻",
"experience": "86",
"ip": "192.168.1.26",
"logins": "106",
"joinTime": "2022-02-22"
}, {
"id": "10006",
"username": "老六",
"email": "[email protected]",
"sex": "男",
"city": "广西",
"sign": "海内存知己，天涯若比邻",
"experience": "12",
"ip": "192.168.1.26",
"logins": "106",
"joinTime": "2022-02-22"
}, {
"id": "10007",
"username": "老七",
"email": "[email protected]",
"sex": "男",
"city": "广西",
"sign": "海内存知己，天涯若比邻",
"experience": "16",
"ip": "192.168.1.26",
"logins": "106",
"joinTime": "2022-02-22"
}, {
"id": "10008",
"username": "老八",
"email": "[email protected]",
"sex": "男",
"city": "广西",
"sign": "海内存知己，天涯若比邻",
"experience": "106",
"ip": "192.168.1.26",
"logins": "106",
"joinTime": "2022-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 '' + res.email + ''
}
}, {
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 = ["", "", ""
].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 = ["", "", ""
].join("");
var contentHtml = "";
for (let i = 0; i < allData.length; i++) {
var data = allData[i]
var template =
"" +
"ID:" + data.id + "" +
"用户名:" + data.username + "
" +
"邮箱:" + data.email + "" +
"积分:" + data.experience + "
" +
"性别:" + data.sex + "" +
"登录次数:" + data.logins + "
" +
"签名:" + data.sign + "" +
"城市:" + data.city + "
" +
"IP:" + data.ip + "" +
"加入时间:" + data.joinTime + "
" +
""
contentHtml += template;
}
//contentHtml为已拼凑好的内容
$(v).append(contentHtml)
//新建窗口
var h = window.open("打印窗口", "_blank");
//写入拼凑内容
h.document.write(f + $(v).prop("outerHTML"));
//调用打印
h.print();
//关闭页面
h.close();
}
script>
html>