HTML頁面實現列印功能
阿新 • • 發佈：2020-07-21
示例1:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>區域性列印案例</title> 6 7 <script type="text/javascript"> 8 function doPrint() { 9 //獲取整個列印前頁面，作用是列印後恢復。 10bdhtml = window.document.body.innerHTML; 11 sprnstr = "<!--startprint-->"; //標記列印區域開始 12 eprnstr = "<!--endprint-->";//標記列印區域結束 13 //獲取要列印的區域, 從標記開始處向下獲取。 14 prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);//17表示游標右移17個單位 15 //刪除結束標記後面的內容。 16 prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); 17 //將頁面顯示要列印的內容。 18 window.document.body.innerHTML = prnhtml; 19 //列印整個頁面 20 window.print(prnhtml); 21 //恢復列印前的頁面 22 window.document.body.innerHTML =bdhtml; 23 24 } 25 </script> 26 27 28 </head> 29 30 <body> 31 <p>1不需要列印的地方</p> 32 <!--startprint--> 33 <!--注意要加上html裡star和end的這兩個標記--> 34 <h1>列印標題</h1> 35 <p>列印內容~~</p> 36 <!--endprint--> 37 <button type="button" onclick="doPrint()">列印</button> 38 <p>2不需要列印的地方</p> 39 </body> 40 41 </html>
示例2:
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Print</title> <script src="js/jquery.min.js"></script> </head> <body> <span id="cc"> 這裡有一頭豬要打一下。 </span> <div> <a id="ps" href="javascript:;">列印</a> </div> </body> <script type="text/javascript"> var ps = document.getElementById('ps'); function preview(id) { var sprnhtml = $('#' + id).html(); //獲取區域內容 var selfhtml = $('body').html(); //獲取當前頁的html, 用來恢復頁面 //設定整個頁面為要列印的內容。 $('body').html(sprnhtml); //列印預覽整個頁面。 window.print(); //恢復整個頁面到列印前的內容。 $('body').html(selfhtml); } ps.onclick = function () { preview('cc'); } </script> </html>