layui js 自定义打印功能实现

꧁༺蓝冰༻꧂

已于 2022-02-22 17:58:08 修改

阅读量2.2k

点赞数 2

分类专栏：前端文章标签： javascript layui 前端

于 2022-02-22 17:46:01 首次发布

本文链接：https://blog.csdn.net/weixin_46664972/article/details/123073728

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这个示例展示了如何使用layui库实现表格的打印功能。通过创建一个新页面并绘制所需效果，然后调用浏览器的打印功能，可以自定义打印表格内容。示例中包括了一个基本的layui表格，以及两个按钮，一个用于打印整个表格，另一个用于打印选中的行。当点击打印选中行按钮时，会弹出包含选中行详细信息的新页面进行打印。

摘要由CSDN通过智能技术生成

打印功能的实现往往是新建一个页面，然后在新建页面中画出你想要的效果，然后调用浏览器的打印功能进行打印

项目依赖：

layui
jquery

记得换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@qq.com",
					"sex": "男",
					"city": "广西南宁",
					"sign": "海内存知己，天涯若比邻",
					"experience": "116",
					"ip": "192.168.1.26",
					"logins": "666",
					"joinTime": "2022-02-22"
				}, {
					"id": "10002",
					"username": "李四",
					"email": "189461@qq.com",
					"sex": "男",
					"city": "广西贵港",
					"sign": "海内存知己，天涯若比邻",
					"experience": "12",
					"ip": "192.168.1.26",
					"logins": "106",
					"joinTime": "2022-02-22",
				}, {
					"id": "10003",
					"username": "王五",
					"email": "189461@qq.com",
					"sex": "男",
					"city": "广西玉林",
					"sign": "海内存知己，天涯若比邻",
					"experience": "65",
					"ip": "192.168.1.26",
					"logins": "106",
					"joinTime": "2022-02-22"
				}, {
					"id": "10004",
					"username": "玛卡巴卡",
					"email": "189461@qq.com",
					"sex": "女",
					"city": "广西百色",
					"sign": "海内存知己，天涯若比邻",
					"experience": "666",
					"ip": "192.168.1.26",
					"logins": "106",
					"joinTime": "2022-02-22"
				}, {
					"id": "10005",
					"username": "老五",
					"email": "189461@qq.com",
					"sex": "男",
					"city": "广西",
					"sign": "海内存知己，天涯若比邻",
					"experience": "86",
					"ip": "192.168.1.26",
					"logins": "106",
					"joinTime": "2022-02-22"
				}, {
					"id": "10006",
					"username": "老六",
					"email": "189461@qq.com",
					"sex": "男",
					"city": "广西",
					"sign": "海内存知己，天涯若比邻",
					"experience": "12",
					"ip": "192.168.1.26",
					"logins": "106",
					"joinTime": "2022-02-22"
				}, {
					"id": "10007",
					"username": "老七",
					"email": "189461@qq.com",
					"sex": "男",
					"city": "广西",
					"sign": "海内存知己，天涯若比邻",
					"experience": "16",
					"ip": "192.168.1.26",
					"logins": "106",
					"joinTime": "2022-02-22"
				}, {
					"id": "10008",
					"username": "老八",
					"email": "189461@qq.com",
					"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 '<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>