首页 > 代码库 > window.print()打印页面指定内容(使用iframe保证原页面不失效)
window.print()打印页面指定内容(使用iframe保证原页面不失效)
使用window.print()时会出现两个问题:
(1)直接使用window.print() 打印的是整页内容-->无法实现打印指定区域
(2)打印时替换body中的内容,打印完成后再替换回来-->这样会导致原来页面事件失效
使用iframe即可打印指定内容,也可保证页面不失效,具体方法如下:
1、将打印的内容独立出来为一个print.html文件,并为页面添加打印事件
<!DOCTYPE html><html><head> ...</head><body> ...打印内容</body><script> function iframePrint(){ //添加打印事件 window.print(); }</script>
2、在原页面中使用iframe引入打印页面
<!DOCTYPE html>...<iframe src="print.html" frameborder="0" id="printIframe" name="printIframe" ></iframe>...<button id="btn">打印</button>...
3、打印事件绑定,在原页面中调用print.html中的打印事件(为方便表示这里使用jq绑定事件)
$("#btn").on("click",function(){ document.getElementById(‘printIframe‘).contentWindow.iframePrint();})
至此,点击打印即可实现iframe中内容的打印 ;
window.print()打印页面指定内容(使用iframe保证原页面不失效)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。