示例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 //獲取整個打印前頁面，作用是打印后恢復。 10 bdhtml = 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>