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

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

 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


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

分享给朋友:

相关文章

多说评论框怎么用更好

 1.隐藏屏蔽掉多说评论框的版权链接代码?简单css实现:多说隐藏版权链接,在后台自定义css添加:#ds-thread #ds-reset .ds-powered-by { display...

是谁动了我的座位

是谁动了我的座位

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

jquery 操作html元素(及CSS)

jquery 操作html元素(及CSS)

 $("li").addClass("aui-user-view-cell aui-img") ;  //给元素添加样式$('#a1...

开机密码忘记怎么办

1、重新启动计算机,在启动画面出现后马上按下F8键(不同类型型号电脑启动键不一样,参考附加),选择“带命令行的安全模式”。2、运行过程结束时,系统列出了系统超级用户“administrator”和本地...

竟然可以这样打扮!女人呆了!男人痴了!

来个轻松点的哇,惊呆了,肯定贵不了,立刻去瞅瞅...

Java 实现用户资料完整度的前端显示(或根据填写资料自动评分)

前端使用 Bootstrap 的进度条组件显示百分比,后台读取权重并计算信息完整度,并将计算的结果返回给前端,供页面显示。CSS1<link href="static/sc/...

发表评论

访客

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