JavaScript實作點擊按鈕直接列印_javascript技巧
- WBOY原創
- 2016-05-16 15:21:262005瀏覽
很多網站都有此功能，當瀏覽到底部時都會有一個打印按鈕，點擊打印按鈕就可以完成打印功能，功能非常不錯，人性化，代碼非常的簡單。
<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實作點擊按鈕就列印功能，希望這篇文章對大家有幫助。