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

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

 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


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

分享给朋友:

相关文章

每次开机checking file system on d

 解决方案:点击左下角(开始)- (运行)输入(CMD)回车 - 进入CMD界面- 输入(d:)回车 - 输入(chkdsk /f)中间有空格。回车,出现提示按Y键,完成后,重启一次会检...

plsql 中number类型字段 取消科学计数法显示

 PL/SQL DEVELOPER中禁用科学计数法:Tools - Prefrence - SQL Window - 选择:"Number fields to_char&quo...

如何彻底卸载删除oracle数据库

 windows下如何彻底删除Oracle 软件环境: 1、Windows 2000+ORACLE 8.1.7 ,oracle 10g2、ORACLE安装路径为:C:\ORACLE实现方...

MyEclipse 10安装svn

MyEclipse 10安装svn

 方法一:在线安装(推荐)1.打开HELP->MyEclipse ConfigurationCenter。切换到SoftWare标签页。 2.点击Add Site 打开对话框...

目标管理法——目标分解法

让自己的人生更幸福更有意义关键是:要将梦想转化为具体的目标,然后合理的分解,达到量化,指标化!现将学习到的两种非常有效的目标分解法分享给所有梦想、有激情的朋友:祝愿大家都能梦想成真! 一、俄...

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

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

发表评论

访客

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