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