示例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>