如何點選一個按鈕實現列印

antzone發表於2017-03-13

很多網站在底部都有一個列印按鈕，點選此按鈕就可以實現列印效果，程式碼非常的簡單。

[HTML] 純文字檢視 複製程式碼
<a href="javascript:window.print()">螞蟻部落</a>

也就是隻要呼叫window.print()函式就可以實現列印當前頁面。

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

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.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事件一章節。

相關文章