打印功能会出现的问题

需求如图：

弹窗里有“打印”功能。

最开始网上找了个方案：

http://www.cnblogs.com/huichao1314/p/5545992.html 参考下博客。

主要代码：

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>

    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="30px;margin-top:-10px; ">
                            <span  >审批表</span>
                           </span>
            </div>
                    <table class="table " border="1"    style=" 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"  >
                                (&nbsp;&nbsp;)A XXXXXXXXXXXXXXXXXXXX。 
                                <br>(&nbsp;&nbsp;)B XXXXXXXXXXXXXXXXXXXX。 
                                <br>(&nbsp;&nbsp;)C XXXXXXXXXXXXXXXXXXXX。
                                <br>(&nbsp;&nbsp;)D XXXXXXXXXXXXXXXXXXXX
                                <br>(&nbsp;&nbsp;)E XXXXXXXXXXXXXXXXXXXX
                                <br>(&nbsp;&nbsp;)F XXXXXXXXXXXXXXXXXXXX。 
                                 </td>
                                 
                            </tr>
                            <tr  bgcolor="#FFFFFF" >
                                <td width="660px;">XXXXXXXXXXXXXXXXXXXX </td>
                                <td colspan="7"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;该人&nbsp;&nbsp;&nbsp;&nbsp;<input type="text"   >&nbsp;&nbsp;&nbsp;建议送院治疗
                                <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;"> 日期：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年   &nbsp;&nbsp;&nbsp; 月  &nbsp;&nbsp;&nbsp;日</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="794px; height:1123px;" >' + el.innerHTML + '</div>');
    doc.close();
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
   // if (navigator.userAgent.indexOf("MSIE") > 0)              //注释掉浏览器判断，否则iframe移除不成功，iframe内容出现在页面上 
  //  {
         document.body.removeChild(iframe);
   // }
}
</script>

参考下 https://www.jb51.net/article/47622.htm

相关阅读:
sql sever读取写入Excel总结
 sql sever跨数据库复制数据的方法
 SQLServer2005重建索引前后对比【转】
SQL自定义函数
 【C】——回调函数实现泛型算法
 【C】——压缩字符串
 【C】——指针与const限定符
 loop within fields
分类与分步在行测数量关系中的应用
 隔年增长率
原文地址：https://www.cnblogs.com/yizhizhangBlog/p/9831436.html