window.print()打印頁面指定內容（使用iframe保證原頁面不失效）
阿新 • • 發佈：2017-05-21
class code order 一個 ctype ... html中 -c content
使用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保證原頁面不失效）