zoukankan      html  css  js  c++  java

  • 使用jqprint插件完成页面打印

    使用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="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. }  

    如果在项目的开发中，不是要求太高的化，我想通过这个插件可以解决我们目前遇到的一些打印的问题。这个插件的操作也是特别的简单的，通过这个插件，大部分的 页面，我们都可以按照想要的样式打印出来。
  • 相关阅读:
    MVC 网页制作
    Mvc 中国直辖市下拉列表（三级联动）
    MVC 登陆注册页面
    MVC 数据库增删改查（Razor）视图（2）
    MVC 数据库增删改查（Razor）方法（1）和数据库
    winform网页抓取邮箱单发群发并有附件
    winform截取网页邮箱
    winform 图标表chart
    winform图片读取存储于数据库SQL
    winform计算器
  • 原文地址：https://www.cnblogs.com/soundcode/p/7447302.html
Copyright © 2011-2022 走看看