JavaScript 列印div內容

antzone發表於2017-03-17
JavaScript

通常情況下，需要列印的是網頁中的某一個指定區域的內容，而不是網頁中的全部內容。

下面通過例項程式碼介紹一下列印div中內容。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function printdiv(printpage){
  var newstr=document.getElementById(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");
  bt.onclick=function(){printdiv('div_print');}
}
</script>
</head>
<body>
<input type="button"  id="bt" value="點選列印"/>
<div id="div_print">
<h1 style="Color:Red">此div中的內容將會被列印。</h1>
</div>
</body>
</html>

原理非常的簡單，window.print方法列印的是body中的內容。

所以事先要將列印的內容設定為body的內容，之前body中的內容存入一個變數，列印完成，再將body中的內容恢復。

相關文章