layui js 自定义打印功能实现
Posted 杨治中
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了layui js 自定义打印功能实现相关的知识，希望对你有一定的参考价值。
꧁༺蓝冰༻꧂
已于 2022-02-22 17:58:08 修改
655
收藏 1
分类专栏： 前端 文章标签： javascript layui 前端
版权
前端
专栏收录该内容
10 篇文章0 订阅
订阅专栏
打印功能的实现往往是新建一个页面，然后在新建页面中画出你想要的效果，然后调用浏览器的打印功能进行打印
项目依赖：
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>", "bodyfont-size: 12px; color: #666;",
"tablewidth: 100%; border-collapse: collapse; border-spacing: 0;",
"th,tdline-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #666;",
"acolor: #666; text-decoration:none;", "*.layui-hidedisplay: 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>", "divfont-size:16px;", ".mainwidth:100%;height:100%",
".main divwidth: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>
以上是关于layui js 自定义打印功能实现的主要内容，如果未能解决你的问题，请参考以下文章