print之 js打印功能
<include file="public@header"/> <style type="text/css"> .wrap{padding-top:0; padding-bottom: 0;} .health{width: 370px; height: 230px; margin:0 auto; margin-top: 20px; margin-bottom: 10px;} .health_title{font-family: "Microsoft YaHei"!important; height: 60px; line-height: 60px; background-color: #2d4e9a; text-align: center; color: rgb(255,255,255); font-size: 40px;} .health_left{float: left; width: 74%; height: 140px; padding: 8px 0; background-color: #FFF; color:#000; box-sizing:border-box;} .health_left .one{float: left; width: 90%; margin-left:8%; font-size: 12px; height: 18px; line-height: 18px;} .health_left .two{float: left; width: 42%; margin-left: 8%; font-size: 12px; height: 18px; line-height: 18px;} .health_left span{font-size: 12px;} .health_right{float: left; width: 26%; height: 140px; padding: 8px 0; margin:0 auto; font-size: 12px; text-align: center;} .health_right img{width: 80px; height: 90px; margin: 8px 0;} .health_right span{width:90%; text-align: center; line-height: 18px; height: 18px; font-size: 12px; margin-top: 1px;} .seal{width: 47%; display: inline-flex;} .health_foolt{font-family: "Microsoft YaHei"!important; float: left; height: 28px; line-height: 27px; background-color: #2d4e9a; text-align: center; color:rgb(255,255,255); width:100%;letter-spacing:3px;} .preview{height: 50px; line-height: 50px; text-align: center;} .preview button{width: 100px; height: 35px; line-height: 35px;} @page { margin: 0; } @media print { .health_title,.health_foolt{ background-color: #2d4e9a!important; color: rgb(255,255,255)!important; font-family: "Microsoft YaHei"!important; } .health_left,..health_right{ font-family:'宋体'!important; } } </style> </head> <body> <div class="wrap"> <!--startprint--> <div class="health"> <div class="health_title">健 康 证 明</div> <div class="health_left" style="font-family:'宋体'!important;"> <div class="one">编号:<span></span></div> <div class="two">姓名:<span></span></div> <div class="two">性别:<span></span></div> <div class="two">工种:<span></span></div> <div class="two">年龄:<span></span></div> <div class="one">体检:<span></span></div> <div class="one">工作单位:<span></span></div> <div class="one">发证日期:<span></span></div> <div class="one">健康检查单位<span class="seal"></span>(章)</div> </div> <div class="health_right" style="font-family:'宋体'!important;"> <img class="right_img" src=''> <div>(有效期一年)</div> </div> <div class="health_foolt">济南高新技术产业开发区管委会市场监督局</div> </div> <!--endprint--> <div class="preview"> <button onclick="preview(1)" class="noprint">打印</button> </div> </div> </body> <script> function preview(oper){ if (oper < 10){ bdhtml=window.document.body.innerHTML;//获取当前页的html代码 sprnstr="<!--startprint-->";//设置打印开始区域 eprnstr="<!--endprint-->";//设置打印结束区域 prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+20); //从开始代码向后取html prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html window.document.body.innerHTML=prnhtml; window.print(); // window.document.body.innerHTML=bdhtml; } else { window.print(); } } </script> </html>