window.print()打印页面指定内容（使用iframe保证原页面不失效）
Posted 庞永胜
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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保证原页面不失效）的主要内容，如果未能解决你的问题，请参考以下文章