使用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

使用window.print()打印局部页面，ifrme打印ie报错相关推荐

window.print()实现局部打印及遇到的问题
window.print()实现局部打印及遇到的问题公司的一个后台管理系统需要实现打印一个签收单,我选择用window.print()实现打印,但是遇到了一些问题:需求实现的效果: 打印时需要隐藏顶 ...
使用window.print()后，未关闭打印页面，原网页不能操作
使用window.print()后,未关闭打印页面,原网页不能操作,此时可以试着用window.location.reload()重新加载页面解决问题. 转载于:https://www.cnblogs ...
【js监听报错】页面监听js报错问题
<html> <head> <script type="text/javascript">// 页面监听js报错问题 οnerrοr=handl ...
vue项目使用浏览器打印局部页面
项目需求是生成个报告输出为pdf和word格式下载到本地.本来使用jspdf实现的领导看了说字体太糊.检查发现因为那本来就是张图片映射到pad上的大小改变了所以字体啥的丢帧了. 然后改成用window ...
window.print()方法，如何获取打印弹框显示状态
<button (click)="print()" >打印</button>private isPrint: boolean = false;public ...
framework层加了打印信息打印intent传递的数据，报错：ActivityManager: Activity Manager Crash. UID:10074 PID:7444 TRANS:3
最近有个项目,需要跳转到第三方应用展示影片详情页,通过打印信息,可以找到要跳转的activity的名称或action,但是利用这个activity跳转之后,该详情页的背景图始终显示不出来,是我少传了参 ...
后台返回数据打印是[object object]的，报错：SyntaxError: JSON.parse: expected property name or ‘}‘ at line 1 column
今天基于这个问题纠结了一下午,导致这个问题的坑也是挺深的,查找问题最好是从这条数据的存储开始查找问题1:先确定后台接收数据后存储到数据库里有没有自动转义特殊字符,比如原始数据是:[{"u ...
requirejs页面刷新失效js报错问题解决方案
插件名称:requirejs 问题:页面刷新后模块载入失效,js报错下载地址:http://www.chtml.cn/topic/show/10816 问题原因: requirejs是先加载本身在加 ...
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办？
有一天,我写了一个自信满满的自定义组件myComponent,在多个页面import使用了,结果控制台给我来这个我特么裤子都脱了,你给我来这个提示是几个意思仔细一看 The Component ' ...

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

使用window.print()打印局部页面，ifrme打印ie报错相关推荐

最新文章

热门文章