javascript實現區域性列印程式碼例項

antzone發表於2017-03-22
JavaScript

列印網頁的時候往往無需列印整個頁面，而僅僅需要列印其中的一部分，下面就通過程式碼例項介紹一下如何利用javascript實現網頁區域性列印效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript"> 
function preview(oper){ 
  if(oper<10){ 
    bdhtml=document.body.innerHTML;
    sprnstr="<!--startprint"+oper+"-->";
    eprnstr="<!--endprint"+oper+"-->";
    prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18);
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
    document.body.innerHTML=prnhtml; 
    window.print(); 
    document.body.innerHTML=bdhtml; 
  } 
  else{ 
    window.print(); 
  } 
} 
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    preview(1)
  }
}
</script> 
</head>
<body> 
<!--startprint1-->螞蟻部落歡迎您<!--endprint1-->
<div>分享互助是進步的最大源動力，你的胸懷有多大你的成就會有多大。</div>
<input id="bt" type="button" value="點選列印"/> 
</body> 
</html>

以上程式碼實現了我們的要求，可以對指定區域的元素進行列印，下面簡單介紹一下它的實現原理。

原理其實非常的簡單，首先將頁面原來的內容儲存在變數bdhtml中，然後通過擷取字串的方式獲取要列印的內容，並且要列印的內容設定為頁面的內容，列印完畢之後，再將原來頁面內容還原。

相關閱讀:

1.innerHTML屬性可以參閱js innerHTML一章節。 

2.substring()函式可以參閱javascript substring()一章節。

3.indexOf()函式可以參閱javascript String indexOf()一章節。

4.print()函式可以參閱window.print()一章節。 

相關文章