使用jqprint插件完成页面打印

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

使用jqprint插件完成页面打印

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

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

 

[javascript]  view plain  copy
 
 print?
  1. $("#visaReport").jqprint({});  

 

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

 

[html]  view plain  copy
 
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3.        <head>  
  4.               <metacharsetmetacharset="UTF-8"/>  
  5.               <title>效果测试</title>  
  6.               <linkhreflinkhref="printShou.css" rel="stylesheet"type="text/css" media="print"/>  
  7.               <scripttypescripttype="text/javascript"src="jquery-1.7.2.js"></script>  
  8.               <scripttypescripttype="text/javascript"src="jquery.jqprint-0.3.js"></script>  
  9.               <scripttypescripttype="text/javascript">  
  10.                      $(function()  
  11.                      {  
  12.                             $("#btn1").click(function()  
  13.                             {  
  14.                                    $("#visaReport").jqprint({});  
  15.                             });  
  16.                      });  
  17.               </script>  
  18.        </head>  
  19.    
  20.        <body>  
  21.               <input type="button"id="btn1" value="打印"/>  
  22.               <divclassdivclass="visaReport" id="visaReport">  
  23.                      <divclassdivclass="visa_head">  
  24.                             <divclassdivclass="visa_head_title">XX中心</div>  
  25.                             <divclassdivclass="visa_head_title">确认及收据</div>  
  26.                      </div>  
  27.                      <divclassdivclass="visa_body">  
  28.                             <div>  
  29.                                    <divclassdivclass="visa_person">  
  30.                                              
  31.                                            <div class="visa_label">姓名:xiaoming</div>  
  32.                                            
  33.                                            <div class="visa_label">日期:2014/12/30</div>  
  34.                                    </div>  
  35.                              
  36.                                    <tableclasstableclass="visa_fee">  
  37.                                           <tr>  
  38.                                                  <td>项</td><td>价格</td>  
  39.                                           </tr>  
  40.                                           <tr>  
  41.                                                  <td>服务费</td><td>119.00RMB</td>  
  42.                                           </tr>  
  43.                                           <tr>  
  44.                                                  <td>快递费</td><td>130.00R</td>  
  45.                                           </tr>  
  46.                                    </table>  
  47.                                    <tableclasstableclass="visa_total_fee">  
  48.                                           <tr>  
  49.                                                  <tdstyletdstyle="width:207px;">Total/总计</td><td>240.00RMB</td>  
  50.                                           </tr>  
  51.                                    </table>  
  52.                             </div>                    
  53.                      </div>  
  54.               </div>  
  55.    
  56.        </body>  
  57. </html>  

 

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

 

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

 

[html]  view plain  copy
 
 print?
  1. <link href="printShou.css" rel="stylesheet"type="text/css" media="print"/>  

 

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

 

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

 

 

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

 
 
本文转自左正博客园博客,原文链接: http://www.cnblogs.com/soundcode/p/7447302.html,如需转载请自行联系原作者
相关文章
|
1月前
|
移动开发 前端开发 JavaScript
完整的页面代码包括哪些
一个完整的HTML页面通常包含以下几个基本部分,每个部分都有其特定的用途
|
4月前
|
JavaScript
Vue实现预览PDF并且支持打印,不会出现乱码、拉升变形、打印预览被切割等弱智问题
Vue实现预览PDF并且支持打印,不会出现乱码、拉升变形、打印预览被切割等弱智问题
|
5月前
echarts插件-从后台请求的数据在页面显示空白的问题
echarts插件-从后台请求的数据在页面显示空白的问题
48 0
|
6月前
|
小程序 NoSQL Redis
【uniapp小程序】打印列表UI模板
【uniapp小程序】打印列表UI模板
|
9月前
element组件库使用笔记---上传图片+回显+预览1.0
element组件库使用笔记---上传图片+回显+预览1.0
38 0
|
10月前
|
图形学 C++
Qt实现Qchart的打印和打印预览的几种方法
Qt实现Qchart的打印和打印预览的几种方法
|
10月前
|
前端开发
页面报错404
报错分析: 在之前的项目中经常会看到页面报404的错误:找不到页面,大多数情况下是文件路径写错了; 前几天在项目中,碰到了另一个错误:400错误。
|
Web App开发 前端开发
使用vscode编写第一个Hello World程序页面详细步骤
对于编程人员来说,第一个程序几乎必写的都是Hello World,也是代表进入了新的学习篇章吧
353 1
使用vscode编写第一个Hello World程序页面详细步骤
|
JavaScript 前端开发
js实现浏览器的打印功能——路径打印
js实现浏览器的打印功能——路径打印
433 0
js实现浏览器的打印功能——路径打印

相关实验场景

更多