首頁 > web前端 > js教程 > JavaScript實作點擊按鈕直接列印_javascript技巧

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

WBOY
發布: 2016-05-16 15:21:26
原創
2029 人瀏覽過

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

<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實作點擊按鈕就列印功能,希望這篇文章對大家有幫助。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板