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保證原頁面不失效)