1. 程式人生 > >window.print()打印頁面指定內容(使用iframe保證原頁面不失效)

window.print()打印頁面指定內容(使用iframe保證原頁面不失效)

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