js或jquery实现页面打印可局部打印

最新推荐文章于 2024-07-14 03:38:22 发布

xxmric

最新推荐文章于 2024-07-14 03:38:22 发布

阅读量2.8k

点赞数 1

分类专栏： js

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

js或jquery实现页面打印(局部打印)

1、js实现（可实现局部打印）

  代码如下: 
 
[html]view plaincopy 
    
print?
 <html>  
 <title>js打印</title>  
 <head></head><body>  
 <input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" />  
   
 <input id="btnPrint" type="button" value="打印预览" onclick=preview(1) />  
 <style type="text/css" media=print>  
 .noprint{display : none }  
 </style>  
   
   
 <p class="noprint">不需要打印的地方</p>  
   
 <script>  
 function preview(oper)  
 {  
 if (oper < 10)  
 {  
 bdhtml=window.document.body.innerHTML;//获取当前页的html代码  
 sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域  
 eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域  
 prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html  
   
 prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html  
 window.document.body.innerHTML=prnhtml;  
 window.print();  
 window.document.body.innerHTML=bdhtml;  
 } else {  
 window.print();  
 }  
 }  
 </script>  
 <p>XXXXX</p>  
 <!--startprint1-->要打印的内容<!--endprint1-->  
 </body>  
 </html>   

2、jQuery实现（支持局部打印）

代码如下:

[html]view plaincopy 
   
print?
 <html>  
 <head>  
 <script type="text/javascript" src="jquery-1.6.4.js"></script>  
 <script>  
 $(function(){  
 $("input#biuuu_button").click(function(){  
 $("div#myPrintArea").printArea();  
 });  
 </script>  
 </head>  
 <body>  
 <input id="biuuu_button" type="button" value="打印"></input>  
 <div id="myPrintArea">.....文本打印部分.....</div> <div class="quote_title">引用</div><div class="quote_div"></div>  
 </body>  
 </html>  

xxmric

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js或jquery实现页面打印可局部打印

js或jquery实现页面打印(局部打印) 1、js实现（可实现局部打印）代码如下:[html] view plain copy print?html> title>js打印title> head>head>body> input id="btnPrint" type="button" value="打印" onc
复制链接

扫一扫

专栏目录