1 js
form.on('submit(printContent2)', function (d) {printUtil.print('content2')return;})
2 layui -js自定义组件printUtil.js
layui.define(function (exports) {var layer = layui.layer,upload = layui.upload,$ = layui.jquery,setter = layui.setter,request = setter.request,thisName = 'printUtil',utils = {};var printAreaCount = 0;/*** 打印* @param id*/utils.print = function (id) {// toPrintView(id)var ele = $("#"+id);var idPrefix = "printArea_";removePrintArea(idPrefix + printAreaCount);printAreaCount++;var iframeId = idPrefix + printAreaCount;// var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';var iframeStyle = 'display:none';iframe = document.createElement('IFRAME');$(iframe).attr({style: iframeStyle,id: iframeId});document.body.appendChild(iframe);var doc = iframe.contentWindow.document;$(document).find("link").filter(function () {return $(this).attr("rel").toLowerCase() == "stylesheet";}).each(function () {doc.write('<link type="text/css" rel="stylesheet" href="'+ $(this).attr("href") + '" >');});doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html()+ '</div>');doc.close();var frameWindow = iframe.contentWindow;frameWindow.close();frameWindow.focus();frameWindow.print();}var removePrintArea = function (id) {$("iframe#" + id).remove();};utils.printByClass = function (className) {var newstr = '';var obj = document.getElementsByClassName(className);for(var i =0 ;i<obj.length;i++){newstr += obj[i].innerHTML}var idPrefix = "printArea_";removePrintArea(idPrefix + printAreaCount);printAreaCount++;var iframeId = idPrefix + printAreaCount;// var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';var iframeStyle = '';iframe = document.createElement('IFRAME');$(iframe).attr({style: iframeStyle,id: iframeId});document.body.appendChild(iframe);var doc = iframe.contentWindow.document;$(document).find("link").filter(function () {return $(this).attr("rel").toLowerCase() == "stylesheet";}).each(function () {doc.write('<link type="text/css" rel="stylesheet" href="'+ $(this).attr("href") + '" >');});doc.write('<div class="">' + newstr+ '</div>');doc.close();var frameWindow = iframe.contentWindow;frameWindow.close();frameWindow.focus();frameWindow.print();}// function toPrintView(id) {// execPrint(id)// }//// function execPrint(myDiv) {// var newstr = document.getElementById(myDiv).innerHTML;// var bodyStr = document.body.innerHTML;//获取当前页所有内容// document.body.innerHTML = newstr;// window.print();// // document.body.innerHTML = bodyStr;// }exports(thisName, utils);
});
3 html
<div id="content2" style="margin-bottom: 20px;"><div class="layui-card-body"><div class="layui-card"style="border: 4px solid black;height: 170mm;width: 260mm;margin: 0px auto;position: relative;padding-top:5px;padding-bottom:15px;padding-left: 5px;padding-right: 20px;;background-color: white"><div class="layui-card"style="border: 2px solid black;height: 169mm;width: 259.9mm;margin: 0px auto;position: relative; padding:5px;background-color: white"><!--<div class="head"--><!--style="padding-bottom: 20px;height: 97%;width:280px;float: left;border-right: 2px dotted #aaa">--><!--<div style="height: 70px;padding-top:20px;font-size: 18px;">--><!--<div style="width: 50px;margin-left: 5px;">--><!--<img src="/start/img/fxfj01.png">--><!--</div>--><!--<div style="padding-top: 20px;">--><!--<div class="head">--><!--<h4 style="text-align: center;font-weight: bolder;line-height: 50px;">兴 奋 剂 检 查 授 权--><!--书</h4>--><!--<h5 style="text-align: center;font-weight: bold;">( 存 根 )</h5>--><!--</div>--><!--<p style="padding-left: 5px;font-size: 15px;padding-top: 20px;height: 40px; width:270px;">--><!--编号：反兴奋剂检查字第 <span class="authBookId" style="color:red;font-size: 20px;font-weight: bolder"></span> 号--><!--</p>--><!--<div style="font-size: 16px;padding-left: 5px;padding-top: 20px;">--><!--<table>--><!--<tr>--><!--<td>检 查 地 点 ：--><!--</td>--><!--<td><u class="checkAddrProvince"></u></td>--><!--</tr>--><!--<tr>--><!--<td></td>--><!--<td><u class="checkAddrCity"> </u></td>--><!--</tr>--><!--</table>--><!--</div>--><!--<div style="padding-top: 30px;font-size: 16px;padding-left: 5px;">--><!--<table>--><!--<tr>--><!--<td>授 权 期 限 ：</td>--><!--</tr>--><!--<tr>--><!--<td colspan="2" style="padding-left: 80px;line-height: 40px;" > <span class="startDate1"></span> 至--><!--</td>--><!--</tr>--><!--<tr>--><!--<td colspan="2" style="padding-left: 80px;line-height: 40px;"><span class="endDate1"></span>。--><!--</td>--><!--</tr>--><!--</table>--><!--</div>--><!--<div style="padding-left: 5px;font-size: 16px;height: 120px;padding-top: 20px;">--><!--兴 奋 剂 检 查 官 ：--><!--<u class="peopleName"></u>--><!--</div>--><!--<div style="padding-left: 5px;padding-top: 40px;font-size: 16px;">--><!--<table>--><!--<tr>--><!--<td>签 发 时 间：</td>--><!--<td>--><!--<span class="batchCreateTime"></span>--><!--</td>--><!--</tr>--><!--</table>--><!--</div>--><!--</div>--><!--</div>--><!--</div>--><div style="float: left;width:100%;"><div style="height: 70px;padding-top:20px;"><div style="width: 50px;margin-left: 10px;float: left"><img src="/start/img/fxfj01.png"></div><div style="font-size: 17px;float: right;text-align: center;">编号：反兴奋剂检查字第 <span class="authBookId" style="color:red;font-size: 20px;font-weight: bolder"></span> 号</div></div><div><h1 style="text-align: center"> 兴奋剂检查授权书</h1></div><div style=" margin-top:20px;margin-left: 20px;line-height: 30px;font-size: 18px;"><p> 现授权兴奋剂检查官<u class="peopleName"></u>等<u class="peopleNum"> </u>人执行兴奋剂检查任务。</p><p> 兴奋剂检查官应向受检运动员出示检查官证件以及授权书。</p><p> 兴奋剂检查工作按照世界反兴奋剂机构《世界反兴奋剂条例》、《检查和调查国际标准》、国务院《反兴奋剂条例》和国家体育总局相关规定实施。</p><p> 授权期限：<span class="startDate1"></span>至<span class="endDate1"></span>。</p><div style="padding-top:120px; float: right;padding-right: 20px;"><span class="batchCreateTime"></span></div><div style=" padding-top:280px; font-size: 15px;line-height: 20px;text-align: center"><div>地址： 北京市朝阳区安外安定路1号5号楼国家体育总局反兴奋剂中心</div><div>邮编： 100029 电话： 010-84376807 网址：www.chinada.cn</div></div></div></div></div></div></div><div class="layui-card-body" style="padding-top: 50px;"><div class="layui-card"style="border: 4px solid black;height: 170mm;width: 260mm;margin: 0px auto;position: relative;padding-top:5px;padding-bottom:15px;padding-left: 5px;padding-right: 20px;;background-color: white"><div class="layui-card"style="border: 2px solid black;height: 169mm;width: 259.9mm;margin: 0px auto;position: relative; padding:5px;background-color: white"><!--<div class="head"--><!--style="padding-bottom: 20px;height: 97%;width:280px;float: left;border-right: 2px dotted #aaa">--><!--<div style="height: 70px;padding-top:20px;font-size: 18px;">--><!--<div style="width: 50px;margin-left: 5px;">--><!--<img src="/start/img/fxfj01.png">--><!--</div>--><!--<div style="padding-top: 20px;">--><!--<div class="head">--><!--<h4 style="text-align: center;font-weight: bolder;line-height: 50px;">兴 奋 剂 检 查 样 本 托 运--><!--和 携 带 证 明 ( 存 根 )</h4>--><!--</div>--><!--<div style="padding-left: 5px;font-size: 15px;padding-top: 20px;height: 40px;">--><!--编号：反兴奋剂检查字第 <span class="proveId" style="color:red;font-size: 20px;font-weight: bolder"></span> 号--><!--</div>--><!--<div style="font-size: 16px;padding-left: 5px;padding-top: 20px;">--><!--<table>--><!--<tr>--><!--<td>检 查 地 点 ：--><!--</td>--><!--<td><u class="checkAddrProvince"></u></td>--><!--</tr>--><!--<tr>--><!--<td></td>--><!--<td><u class="checkAddrCity" style="text-align: center;"> </u></td>--><!--</tr>--><!--</table>--><!--</div>--><!--<div style="padding-top: 20px;font-size: 16px;padding-left: 5px;">--><!--<table>--><!--<tr>--><!--<td>授 权 期 限 ：</td>--><!--</tr>--><!--<tr>--><!--<td colspan="2" style="padding-left: 80px;line-height: 40px;" > <span class="startDate1"></span> 至--><!--</td>--><!--</tr>--><!--<tr>--><!--<td colspan="2" style="padding-left: 80px;line-height: 40px;"><span class="endDate1"></span>。--><!--</td>--><!--</tr>--><!--</table>--><!--</div>--><!--<div style="padding-left: 5px;font-size: 16px;height: 110px;padding-top: 10px;">--><!--兴 奋 剂 检 查 官 ：--><!--<u class="peopleName"></u>--><!--</div>--><!--<div style="padding-left: 5px;padding-top: 40px;font-size: 16px;">--><!--<table>--><!--<tr>--><!--<td>签 发 时 间：</td>--><!--<td>--><!--<span class="batchCreateTime"></span>--><!--</td>--><!--</tr>--><!--</table>--><!--</div>--><!--</div>--><!--</div>--><!--</div>--><div style="float: left;width: 100%"><div style="height: 70px;padding-top:20px;"><div style="width: 50px;margin-left: 10px;float: left"><img src="/start/img/fxfj01.png"></div><div style="font-size: 17px;float: right;text-align: center">编号：反兴奋剂检查字第 <span class="proveId" style="color:red;font-size: 20px;font-weight: bolder"></span> 号</div></div><div><h1 style="text-align: center"> 兴奋剂检查样本托运和携带证明</h1></div><div style=" margin-top:20px;margin-left: 20px;line-height: 30px;font-size: 18px;">机场、码头、火车站、汽车站：<p> 国家体育总局反兴奋剂中心是国家反兴奋剂机构，承担国家及国际委托的兴奋剂检查任务。兴奋剂检查官是反兴奋剂中心授权的负责样本采集人员，携带的运动员尿样、血样将送至北京（国家体育总局反兴奋剂中心实验室）进行兴奋剂检测。</p><p> 根据《世界反兴奋剂条例》、《检查和调查国际标准》和国家体育总局反兴奋剂中心的规定，用于反兴奋剂目的的样本在传送过程中需始终保证其完整性，任务和不得打开或破坏样本。因血样保管的特殊要求，血样需由兴奋剂检查官随身携带（后附尿样和血样图片）。</p><p> 望贵单位给予配合。</p><p> 有效期限：<span class="startDate1"></span>至<span class="endDate1"></span>。</p><div style="padding-top:80px; float: right;padding-right: 20px;"><span class="batchCreateTime"></span></div><table style="margin-left: 40px"><tr style="text-align: center"><td style="width: 140px">尿样瓶</td><td style="width: 140px">血样瓶</td></tr><tr style="text-align: center"><td><img src="/start/img/urine.png"></td><td><img src="/start/img/blood.png"></td></tr></table><div style="padding-top:50px; text-align: center;font-size: 15px;line-height: 20px;"><div>地址： 北京市朝阳区安外安定路1号5号楼国家体育总局反兴奋剂中心</div><div>邮编： 100029 电话： 010-84376807 网址：www.chinada.cn</div></div></div></div></div></div></div> </div>