很多網站都有此功能,當瀏覽到底部時都會有一個打印按鈕,點擊打印按鈕就可以完成打印功能,功能非常不錯,人性化,代碼非常的簡單。
<a href="javascript:window.print()">武林網</a>
也就是只要調用window.print()函數就可以實現打印當前頁面。
但是上面的并不完美,因為有些網頁上的很多內容都不需要打印,下面介紹一下如何打印頁面中的指定內容。
代碼如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.survivalescaperooms.com/" /><title>指定被打印的內容</title><script language="javascript"> function printdiv(printpage) { var newstr = printpage.innerHTML; var oldstr = document.body.innerHTML; document.body.innerHTML =newstr; window.print(); document.body.innerHTML=oldstr; return false; } window.onload=function(){var bt=document.getElementById("bt");var div_print=document.getElementById("div_print");bt.onclick=function(){printdiv(div_print);}}</script> </head> <body> <div id="div_print"> <h1 style="Color:Red">這是要被打印的內容</h1> </div><div style="Color:Red">歡迎您</div> <input name="print" type="button" id="bt" value="點擊打印" /> </body> </html>
特別說明:打印預覽需要將代碼復制到本機測試,否則會出錯。
以上代碼實現了打印網頁指定內容的效果,下面簡單介紹一下實現過程。
一.實現原理:
在js代碼中使用document.body.innerHTML =newstr,動態原來body中的內容替換為要打印的內容,在打印過后,在將原來的內容還原,原理就是這么簡單,具體可以參閱代碼注釋。
二.代碼注釋:
1.function printdiv(printpage){},聲明一個控制打印的函數,參數是一個對象,這個對象中的內容將要被打印。
2.var newstr = printpage.innerHTML; ,獲取要打印的內容。
3.var oldstr = document.body.innerHTML,原來body中的內容。
4. document.body.innerHTML =newstr,用將要打印的內容替換原來body中的內容。
5.window.print(),開始打印。
6.document.body.innerHTML=oldstr,再將原來body中的內容還原。
三.相關閱讀:
1.window.print()函數可以參閱window對象的print()方法一章節。
2.onclick事件可以參閱javascript的onclick事件一章節。
以上內容比較簡單,并有單獨的代碼注釋幫助大家學習js實現點擊按鈕就打印功能,希望本文對大家有所幫助。
新聞熱點
疑難解答