问题:
使用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(); }
解决!