使用window.print()打印局部页面,ifrme打印ie报错

问题:

  使用window.print();打印页面,将不需要的数据隐藏,将需要的数据显示,打印完成之后将刚才隐藏的数据还原,显示的数据隐藏,

谷歌浏览器、部分ie能一气呵成,  火狐浏览器以及少数ie浏览器出现了:执行到window.print();时后面的js还未开始执行,类似与alert的阻塞,要等到用户点完页面弹出的打印框才会执行,这样导致隐藏的数据没有显示,显示的数据没有隐藏,

解决办法:

  网上找了很多种方法,

  https://segmentfault.com/a/1190000006236133

  这个链接里有写使用ifrme作为打印的页面

<table align="center" class="ml70">
        <tbody>
            <tr>
                <td colspan="8">
                    <div align="center">
                        <b><span >不打印的内容部分//</span></b></div>
                    <div>
            </tr>
        </tbody>
    </table>
    <a href="#" onclick="javascript:history.back(1); event.returnValue=false">
        << 返回</a><br />
            <!--startprint-->
            <br />
            <table align="center" class="ml70">
                <tbody>
                    <tr>
                        <td colspan="8">
                            <div align="center">
                                <b><span >//要打印的内容部分//</span></b></div>
                            <div>
                    </tr>
                </tbody>
            </table>
            <!--endprint-->
            <input type="button" value="打印" onClick="printPage()" />

            <iframe id="printf" src="" width="0" height="0" frameborder="0"></iframe>
<script type="text/javascript">  
        function printPage() {  
            //获取当前页的html代码  
            var bodyhtml = window.document.body.innerHTML;  
            //设置打印开始区域、结束区域  
            var startFlag = "<!--startprint-->";  
            var endFlag = "<!--endprint-->";  
            // 要打印的部分  
            var printhtml = bodyhtml.substring(bodyhtml.indexOf(startFlag),   
                    bodyhtml.indexOf(endFlag));  
            // 生成并打印ifrme  
            var f = document.getElementById('printf'); 
            f.contentDocument.write(printhtml);
            f.contentDocument.close();
            f.contentWindow.print();
        }  
    </script>

但是使用这个方法,在ie浏览器下, f.contentWindow.print();打印的是iframe的父页面,

如何解决ie中iframe的打印呢, 继续找!

https://yq.aliyun.com/ziliao/69150

ie情况下  printf 为打印的iframe的id

window.frames['printf'].focus(); 
window.frames['printf'].print();

但是使用这个方法在火狐浏览器中直接保错

  window.frames['printf'].print();

综合上面两种方法,进行了一个合并

var f = document.getElementById('printf'); 
  f.contentDocument.write(printhtml);
  f.contentDocument.close();
window.frames['printf'].focus(); 
try{
  window.frames['printf'].print();  
}catch{
        f.contentWindow.print();
}

参考:https://www.cnblogs.com/xianyubuxian/p/8718235.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值