JavaScript print()
呼叫 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一章節。
相關文章
- js printJS
- PHP 列印函式之 print print_rPHP函式
- print the result sqlSQL
- Python print函式用法,print 格式化輸出Python函式
- 字串函式 print ()字串函式
- python print 用法Python
- java-- Print流Java
- print基礎用法
- Android KitKat Print框架Android框架
- pycharm print 加顏色PyCharm
- WPF open image and print as pdf file
- print 與 println 的區別
- python3 print報錯Python
- Notes for building gimp-printUI
- Error ./bin/my_print_defaults: not foundError
- 【Python】 Missing parentheses in call to 'print'Python
- HOW TO PRINT FILE TO NOTEPAD IN GUI?GUI
- exclude Log4j print Log
- python ruturn 和 print 的區別Python
- python3.6print怎麼用Python
- Swift:如何優雅地使用 print()(三)Swift
- window.print —— 瀏覽器列印掃盲瀏覽器
- 使用pycharm print不輸出怎麼辦PyCharm
- 陣列對換,print函式傳參陣列函式
- python 中 print 函式用法總結Python函式
- System.out.print實現原理猜解
- Python: 消除print的自動換行Python
- Python 3 進階 —— print 列印和輸出Python
- PHP中的輸出:echo、print、printf、sprintf、pPHP
- 自帶的 print 函式居然會報錯?函式
- Linux locate/print block device attributes ASMLibLinuxBloCdevASM
- Python3基礎篇--print的使用Python
- echoprint()print_r()var_dump()的區別
- REP-1216:has an illegal print condition
- sqlplus選項之column print_noprintSQL
- Flutter冷知識 | 獲取dart的print內容FlutterDart
- 如何用python3輸出print對齊?Python
- python3中 print不加括號報錯!Python