jquery.PrintArea.min.js实现打印实例

访客9年前 (2017-07-03)javaScript4259

 jquery实现的打印功能大致跟浏览器自带的 Ctrl+P的 效果一样

 

一、效果图:

全屏打印:

图片.png

局部打印:

图片.png


二、代码

<html>
  <head></head>
  <body>  
      <div style="text-align:center; margin-top: 30px">

         <div >
             <div>全屏开始部分</div>
             <div>全屏开始部分</div>
             <div>全屏开始部分</div>
             <div>全屏开始部分</div>
             <div>全屏开始部分</div>
         </div>  
         <br>
         <div id="printArea">
             <div>......局部打印区域......</div>
             <div>......局部打印区域......</div>
             <div>......局部打印区域......</div>
             <div>......局部打印区域......</div>
             <div>......局部打印区域......</div>
         </div>   
         <input id="btnPrint" type="button" value="局部打印"></input> 
         <input id="btnPrintFull" type="button" value="全屏打印"></input> 
     </div>
 </body>
 
 <script src="js/jquery.min.js"></script>
 <script src="js/jquery.PrintArea.js"></script>   
 
 <script>  
           //局部打印
     $("#btnPrint").click(function(){    
         $("#printArea").printArea();  
     });  
        //打印整个页面
     $("#btnPrintFull").click(function(){    
         $("body").printArea();  
     });  
    
     </script> 
 </html>

 

源码下载 提取码:tt1u


本文原创,转载必追究版权。

分享给朋友:

相关文章

js/jquery 日历控件及实例下载

js/jquery 日历控件及实例下载

实现日历控件效果:页面:<link href="${base}/resource/${profile.path}/css/lhgcalendar.css" rel="...

是谁动了我的座位

是谁动了我的座位

女孩一上火车,见自己的座位上坐着一男士。她核对自己的票,客气地说:“先生,您坐错位置了吧?” 男士拿出票嚷嚷着:“看清楚点,这是我的座,你瞎了?” 女孩仔细看了他的票,不再做声,默...

我差不多是个废人了,感觉身体被掏空

林心如跟霍建华都结婚了,滴滴跟优步都在一起了。我们也应该抱住了吧? 终于8月了,超吃点吧,再一咬牙,坚持一下吧,马上秋天到了,就可以又能马上把肥肉藏起来了。 在这里迫不及待教大家一个夏天过后...

樊山越玲 一周年

樊山越玲 一周年

2015-12-25樊先森:周末有约吗?玲玲:有约,不过也得先以你为主啊。樊先森:昂,这样说我还挺开心的。2015-3-26玲玲:亲爱的,苹果是你买的吗?已经收到了,谢谢老公玲玲:有点小惊喜樊先森:那...

ajax提交表单、ajax实现文件上传(multipart/form-data)

方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单方式二:使用jquery的$.ajax({..}), 支持提交普通表单,但不支持...

MySQL、Oracle数据库字段分别设置默认系统时间

MySQL设置方法:1、将字段类型设为  TIMESTAMP 2、将默认值设为  CURRENT_TIMESTAMPMySQL 脚本实现用例--添加CreateTime 设置默认时...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。