需求如图：
弹窗里有“打印”功能。
最开始网上找了个方案：
http://www.cnblogs.com/huichao1314/p/5545992.html 参考下博客。
主要代码：
js
var oper = 1; //初始值 function preview(oper) { if (oper < 10) { bdhtml = window.document.body.innerHTML;//获取当前页的html代码 sprnstr = "<!--startprint" + oper + "-->";//设置打印开始区域 /* alert(sprnstr) */ eprnstr = "<!--endprint" + oper + "-->";//设置打印结束区域 prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));//从结束代码向前取html window.document.body.innerHTML = prnhtml; window.print(); window.document.body.innerHTML = bdhtml; /* window.location.reload(); */ //刷新页面 } else { window.print(); } }
html
然后在所需要打印的代码，用<!--startprint1-->和<!--endprint1-->包围着，如下： --------------------------------------------- <!--startprint1--> <!--打印内容开始--> <div id=sty> ... </div> <!--打印内容结束--> <!--endprint1--> --------------------------------------------- 最后加上一个打印的按钮 <input type=button name='button_export' title='打印1' onclick=preview(1) value=打印1>
这种是可以实现打印的，但是会出现个问题：
用widow自带的打印，点“取消”，会导致最开始的弹窗界面的“取消”，失效。即图1 的不能关闭。
为了解决这个问题 ，换方案：
js调用iframe实现打印页面内容的方法
这种方案是
1) 此程序可以实现选择页面中的区域进行打印，以iframe方式进行打印；
2) 与原生态的print() （方法1）区别在于，取消打印页面后可以完整保留当前访问页面的内容。（解决了问题）
html代码：
// 打印区域： <div id="sty"> ...... </div> // 调用打印 <button onclick="print('sty');">打印</button>
js
function print(id_str){ var el = document.getElementById(id_str); var iframe = document.createElement('IFRAME'); var doc = null; document.body.appendChild(iframe); doc = iframe.contentWindow.document; doc.write('<div>' + el.innerHTML + '</div>'); doc.close(); iframe.contentWindow.focus(); iframe.contentWindow.print(); if (navigator.userAgent.indexOf("MSIE") > 0) { document.body.removeChild(iframe); } }
测试下发现，进入打印页面取消后，也不会影响最开始的弹窗啦...
补充：
iframe 打印一个表格 不想分页 的话如何设置呢：
<div class="btn_end" style="float: right;"> <div class="col-sm-5 col-sm-offset-6"> <button type="button" class="btn btn-primary" style="background-color: #d7f3ec;border-color: grey;color: black;" name='button_export' title='打印' onclick="print('print_sp');">打印</button> </div> </div> <div id="print_sp" style="height:640px;border:1px ;"> <div style="margin-left:250px;font-size: 20px;font-weight: bold;"> <span style="display: inline-block;top:15px;"> <img src="${cxt!}/images/idx_img/log_icon.png" style="width:30px;margin-top:-10px; "> <span >审批表</span> </span> </div> <table class="table " border="1" style=" width:100%;border:0 ; cellpadding:0 ;cellspacing:0 ; " > <tbody> <tr bgcolor="#FFFFFF"> <td width="220px;">XXXX</td> <td width="220px;"> </td> <td width="220px;">XXXX</td> <td width="220px;"> </td> <td width="220px;">XXXX</td> <td width="220px;"> </td> <td >XXXX</td> <td > </td> </tr> <tr bgcolor="#FFFFFF"> <td width="220px;">XXXX</td> <td width="220px;" > </td> <td width="220px;">XXXX</td> <td width="220px;"> </td> <td width="220px;">XXXX</td> <td width="220px;"> </td> <td width="220px;">XXXX</td> <td width="220px;" > </td> </tr> <tr bgcolor="#FFFFFF"> <td width="220px;">XXXX</td> <td width="220px;"> </td> <td width="220px;">XXXX</td> <td width="220px;" > </td> <td width="220px;">XXXX</td> <td width="220px;" > </td> <td width="220px;">XXXX</td> <td width="220px;" > </td> </tr> <tr bgcolor="#FFFFFF" > <td width="660px;">XXXX </td> <td colspan="7" > ( )A XXXXXXXXXXXXXXXXXXXX。 <br>( )B XXXXXXXXXXXXXXXXXXXX。 <br>( )C XXXXXXXXXXXXXXXXXXXX。 <br>( )D XXXXXXXXXXXXXXXXXXXX <br>( )E XXXXXXXXXXXXXXXXXXXX <br>( )F XXXXXXXXXXXXXXXXXXXX。 </td> </tr> <tr bgcolor="#FFFFFF" > <td width="660px;">XXXXXXXXXXXXXXXXXXXX </td> <td colspan="7"> 该人 <input type="text" > 建议送院治疗 <div><span style="display:inline-block;margin-left: 290px;margin-top:10px;"> 签名： </span> </div> <div><span style="display:inline-block;margin-left: 530px;margin-top:10px;"> 日期： 年 月 日</span></div> </td> </tr> <tr bgcolor="#FFFFFF" > <td width="660px;">XXXXXXXXXXXXX </td> <td colspan="7"> </td> </tr> <tr bgcolor="#FFFFFF" > <td width="660px;">XXXXXX XX</td> <td colspan="7" > ${jshj.bz!}</td> </tr> <tr bgcolor="#FFFFFF" > <td width="660px;">XXXXXXXXXXXXXXXXXXXX审批意见</td> <td colspan="7" > ${jshj.bz!}</td> </tr> <tr bgcolor="#FFFFFF"> <td >XXXXXXXXXXX</td> <td colspan="3"> </td> <td >XXXXX</td> <td colspan="3"> </td> </tr> <tr bgcolor="#FFFFFF"> <td >XXXXX</td> <td colspan="3"> </td> <td >XXXXX</td> <td colspan="3"> </td> </tr> </tbody> </table> </div> <script type="text/javascript"> function print(id_str){ var el = document.getElementById(id_str); var iframe = document.createElement('IFRAME'); var doc = null; document.body.appendChild(iframe); doc = iframe.contentWindow.document; //重点：div里设置样式为A4纸大小， doc.write('<div style="width:794px; height:1123px;" >' + el.innerHTML + '</div>'); doc.close(); iframe.contentWindow.focus(); iframe.contentWindow.print(); if (navigator.userAgent.indexOf("MSIE") > 0) { document.body.removeChild(iframe); } } </script>
参考下 https://www.jb51.net/article/47622.htm