JavaScript print()

admin發表於2018-09-21

呼叫 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一章節。

相關文章