效果图如下
自定义内容导出
自定义表格导出
目录
一、 自带的打印功能的实现
1. 下载新的layui的js文件
2. 添加toolbar参数
3. 最终打印图标显示
4. 点击打印图标，实现打印效果
5. 隐藏打印功能
二、 自定义打印内容的实现
1. html代码
2. js代码
三、 自定义打印table的实现
1. html代码
2. js代码
一、 自带的打印功能的实现
在layui官网下载新的layui的js文件，有些旧版本的不支持在table数据赋值时，添加如下参数toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
最终会显示出如下图的打印图标
点击打印图标，实现打印table的效果如果不需要打印功能，可隐藏，实现代码如下
$(".layui-table-tool-self .layui-inline").eq(2).hide();//不需要自带的打印功能
二、 自定义打印内容的实现
html代码<div class="layui-inline"><label class="layui-form-label">打印内容</label><div class="layui-input-inline" style="width: 200px"><input type="text" name="txtPrint" id="txtPrint" placeholder="请输入打印内容" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><a id="print" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon layui-icon-print"></i></a></div>
js代码
//自定义打印内容$("#print").click(function () {var v = document.createElement("div");$(v).append($("#txtPrint").val() + "</div>");var h = window.open("Print_window", "_blank");h.document.write($(v).prop("outerHTML"));h.document.close();h.print();h.close();})
三、 自定义打印table的实现
html代码<div class="layui-inline"><label class="layui-form-label">打印表格</label><table id="table_info"><tr><td>7</td><td>8</td><td>9</td></tr></table></div><div class="layui-inline"><a id="printTable" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon layui-icon-print"></i></a></div>
js代码
//自定义打印table$("#printTable").click(function () {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}", ".picture{ }", "</style>", "</head>"].join("");$(v).append($("#table_info").html() + "</div>");var h = window.open("Print_window", "_blank");h.document.write(f + $(v).prop("outerHTML"));h.document.close();h.print();h.close();})
