JavaScript實作點擊按鈕直接列印_javascript技巧-js教程-PHP中文網

JavaScript實作點擊按鈕直接列印_javascript技巧

WBOY

發布： 2016-05-16 15:21:26

原創

1952 人瀏覽過

很多網站都有此功能，當瀏覽到底部時都會有一個打印按鈕，點擊打印按鈕就可以完成打印功能，功能非常不錯，人性化，代碼非常的簡單。

<a href="javascript:window.print()">脚本之家</a>

登入後複製

也就是只要呼叫window.print()函數就可以實作列印目前頁面。

但是上面的並不完美，因為有些網頁上的很多內容都不需要列印，以下介紹如何列印頁面中的指定內容。

程式碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<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實作點擊按鈕就列印功能，希望這篇文章對大家有幫助。