码迷,mamicode.com
首页 > 其他好文 > 详细

使用jqprint插件完成页面打印

时间:2015-01-05 11:16:40      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

使用jqprint插件完成页面打印

jqprint是一个基于jquery编写的页面打印的一个小插件,但是不得不承认这个插件确实很厉害,最近的项目中帮了我的大忙,在Web打印的方面,前端的打印基本是靠window.print()的方式进行打印的,而这个插件在其基础上进行了进一步的封装,可以打印网页上的某个区域,这是个亮点。比如说现在要打印如下的一个效果:

技术分享

我们可以通过写代码完成上述的效果,然后单击网页上的某个按钮,在按钮的处理方法里调用jqprint(),来完成这个区域的的打印显示的操作,首先要获取这个区域,然后调用一个方法即可了,如下所示:

$("#visaReport").jqprint({});

这就是一个简单的操作,但是实际需要的时候,有时我们页面显示样式和我们打印的样式是有些区别的,幸好CSS声明的地方提供了一个media的属性,我们可以指定其输出的方式为print,即media=print的这个属性,写了这个属性之后,所引入CSS的一些样式在打印的时候才会生效了,通过在打印的时候,我们可以通过样式去改变当前网页的显示内容,及显示的样式。先来看下代码吧!

<!DOCTYPE html>
<html>
       <head>
              <metacharset="UTF-8"/>
              <title>效果测试</title>
              <linkhref="printShou.css" rel="stylesheet"type="text/css" media="print"/>
              <scripttype="text/javascript"src="jquery-1.7.2.js"></script>
              <scripttype="text/javascript"src="jquery.jqprint-0.3.js"></script>
              <scripttype="text/javascript">
                     $(function()
                     {
                            $("#btn1").click(function()
                            {
                                   $("#visaReport").jqprint({});
                            });
                     });
              </script>
       </head>
 
       <body>
              <input type="button"id="btn1" value="打印"/>
              <divclass="visaReport" id="visaReport">
                     <divclass="visa_head">
                            <divclass="visa_head_title">XX中心</div>
                            <divclass="visa_head_title">确认及收据</div>
                     </div>
                     <divclass="visa_body">
                            <div>
                                   <divclass="visa_person">
                                           
                                           <div class="visa_label">姓名:xiaoming</div>
                                         
                                           <div class="visa_label">日期:2014/12/30</div>
                                   </div>
                           
                                   <tableclass="visa_fee">
                                          <tr>
                                                 <td>项</td><td>价格</td>
                                          </tr>
                                          <tr>
                                                 <td>服务费</td><td>119.00RMB</td>
                                          </tr>
                                          <tr>
                                                 <td>快递费</td><td>130.00R</td>
                                          </tr>
                                   </table>
                                   <tableclass="visa_total_fee">
                                          <tr>
                                                 <tdstyle="width:207px;">Total/总计</td><td>240.00RMB</td>
                                          </tr>
                                   </table>
                            </div>                  
                     </div>
              </div>
 
       </body>
</html>

现在网页中的页面的样式是这样的:

技术分享

而打印出来的效果确是第一张图的样式,这就是指定了media=print这个属性之后,打印的时候会加载一个css文件所配置的。如下所示:

<link href="printShou.css" rel="stylesheet"type="text/css" media="print"/>

jqprint这个插件能够解决我们大部分开发中,Web页面打印的问题,打印的样式也是可控的。有时需要我们要为其指定一些属性,才能完成需要的效果默认是有如下的四个属性:

{
              debug: false,//如果是true则可以显示iframe查看效果(iframe默认高和宽都很小,可以再源码中调大),默认是false
              importCSS: true, //true表示引进原来的页面的css,默认是true。(如果是true,先会找$("link[media=print]"),若没有会去找$("link")中的css文件)
              printContainer: true,//表示如果原来选择的对象必须被纳入打印(注意:设置为false可能会打破你的CSS规则)。
              operaSupport: true//表示如果插件也必须支持歌opera浏览器,在这种情况下,它提供了建立一个临时的打印选项卡。默认是true
}

如果在项目的开发中,不是要求太高的化,我想通过这个插件可以解决我们目前遇到的一些打印的问题。这个插件的操作也是特别的简单的,通过这个插件,大部分的 页面,我们都可以按照想要的样式打印出来。


使用jqprint插件完成页面打印

标签:

原文地址:http://blog.csdn.net/longyuhome/article/details/42418655

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!