JavaScript print()

admin發表於2018-09-21
原文網址 : https://www.softwhy.com/article-9236-1.html
JavaScript

呼叫 print() 方法可以彈出一個列印設定介面。

點選列印按鈕後，可以列印HTML頁面body中的內容。

特別說明：凡是window物件方法都可以直接使用，無需使用window物件呼叫。

更多內容可以參閱JavaScript window物件一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
window.print()

瀏覽器支援：

（1）.IE 瀏覽器支援此方法。

（2）.edge 瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera 瀏覽器支援此方法。

（5）.火狐瀏覽器支援此方法。

（6）.safari 瀏覽器支援此方法。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
function doPrint() {
  var bodyContent=document.body.innerHTML;
  var printStart = "<!--startprint-->";
  var printEnd = "<!--endprint-->";
  var printContent = bodyContent.substr(bodyContent.indexOf(printStart) + 17);
  var printContent = printContent.substring(0, printContent.indexOf(printEnd));
  window.document.body.innerHTML=printContent;
  window.print();
  document.body.innerHTML=bodyContent;
}
window.onload=function(){
  var bt=document.getElementById("bt");
  bt.onclick = function () {
    doPrint()
  }
}
</script> 
</head>
<body> 
<div id="noprint">螞蟻部落一</div>
<!--startprint-->
<div id="print">螞蟻部落二</div>
<!--endprint-->
<input type="button" value="點選列印" id="bt" />
</body>
</html>

上面是一個簡單列印效果，使用了一些小的技巧，下面做一下分析。

一.實際需求：

頁面實際列印的部分往往可能不是整個頁面，而是頁面中的某一區域。

所以如果直接呼叫print()方法就不滿足需求了，所以需要通過簡單技巧加以改造。

二.程式碼解析：

（1）.程式碼目的是列印<div id="print">螞蟻部落二</div>這部分內容。

（2）.bodyContent=document.body.innerHTML，將body中的所有內容暫存到變數bodyContent中。

（3）.printStart = "<!--startprint-->"，這個與HTML程式碼中的註釋相呼應，作為後面程式碼擷取字串的起始位置標識。

（4）.printEnd = "<!--endprint-->"，上面是相同的道理，作為擷取字串結束位置標識。

（5）.printContent = bodyContent.substr(bodyContent.indexOf(printStart) + 17)，進行擷取字串操作，+17（註釋部分字串長度是17）是為了防止將註釋擷取，也就是說註釋內容不在列印內容範圍內，此程式碼的功能是掐頭。

（6）.printContent = printContent.substring(0, printContent.indexOf(printEnd))，與上面功能類似，同樣以註釋內容為邊界，作用是去尾。

（7）.document.body.innerHTML=printContent，這時候printContent變數儲存了要列印的內容，然後將其寫入頁面中。

（8）.window.print()，最後列印出結果。

（9）.document.body.innerHTML=bodyContent，列印完成後，再將頁面內容恢復。

三.相關閱讀：

（1）.substr方法參閱JavaScript substr()一章節。

（2）.indexOf方法參閱JavaScript 字串 indexOf()一章節。

（3）.substring方法參閱JavaScript substring()一章節。

（4）.innerHTML屬性參閱JavaScript innerHTML一章節。

相關文章