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

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

 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


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

分享给朋友:

相关文章

org.tigris.subversion.javahl.ClientException:Attempted to lock an already-locked dir

 svn更新或提交时候报错:org.tigris.subversion.javahl.ClientException:Attempted to lock an already-locke...

get方式调用http接口   Header赋参数值

get方式调用http接口 Header赋参数值

   /**      195.     * 发送...

dwz +jfinal 批量多文件上传 实例

页面部分:<link href="${root}/style/dwz/uploadify/css/uploadify.css" rel="sty...

java 实现自增编号+Oracle序列

原理:a,a++,fillStr(a, 9, false, "0");新建序列:create sequence seq_lineminvalue 1maxvalue 9999999...

jfinal 定时任务

1、去quartz官网下载 定时任务jar包(http://www.quartz-scheduler.org/)quartz-*.*.*.jar2、创建定时任务:public class SetAre...

美图蔡文胜:出身、学历不重要,我来教你怎么遇贵人

美图蔡文胜:出身、学历不重要,我来教你怎么遇贵人

在这封感谢信中,你看到了他是如何从一个懵懂少年到商业领袖的奋斗励志过程,读后令人心情澎湃。而闭目思索,又让你唏嘘不已。人的一生之中如果你没有遇到贵人,真的什么都不是。  令人羡慕的是,老蔡在自己人生每...

发表评论

访客

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