使用jqprint插件完成页面打印

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

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

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

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

  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. <body>
  20. <input type="button"id="btn1" value="打印"/>
  21. <divclassdivclass="visaReport" id="visaReport">
  22. <divclassdivclass="visa_head">
  23. <divclassdivclass="visa_head_title">XX中心</div>
  24. <divclassdivclass="visa_head_title">确认及收据</div>
  25. </div>
  26. <divclassdivclass="visa_body">
  27. <div>
  28. <divclassdivclass="visa_person">
  29. <div class="visa_label">姓名:xiaoming</div>
  30. <div class="visa_label">日期:2014/12/30</div>
  31. </div>
  32. <tableclasstableclass="visa_fee">
  33. <tr>
  34. <td>项</td><td>价格</td>
  35. </tr>
  36. <tr>
  37. <td>服务费</td><td>119.00RMB</td>
  38. </tr>
  39. <tr>
  40. <td>快递费</td><td>130.00R</td>
  41. </tr>
  42. </table>
  43. <tableclasstableclass="visa_total_fee">
  44. <tr>
  45. <tdstyletdstyle="width:207px;">Total/总计</td><td>240.00RMB</td>
  46. </tr>
  47. </table>
  48. </div>
  49. </div>
  50. </div>
  51. </body>
  52. </html>

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

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

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

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

  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. }

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

使用jqprint插件完成页面打印的更多相关文章

  1. Jquery 页面打印

    <script src="~/Scripts/js/dist/jquery.jqprint-0.3.js"></script> <script typ ...

  2. Jqprint实现页面打印

    好些项目需要实现页面打印,特别是一些后台管理类系统,下面介绍一款轻量级的打印插件: 1.实现页面打印要引入jQuery和Jqprint.点击下载Jqprint插件 <script languag ...

  3. 开源的javascript实现页面打印功能，兼容所有的浏览器（情况属实）

    这篇文章完全是属于技术文章,也是记录一下自己在项目当中遇到的坑爹问题啊,因为是B/S的程序,所以打印功能还是必须要有的,对于打印我选择了一个js插件,发现非常的简单和方便,所以这里拿出来和大家分享一下 ...

  4. Web系统页面打印技术实现与分析

    1 Web页面打印概述应用WEB化,不论对开发商,还是对用户来说,实在是一种很经济的选择,因为基于WEB的应用,客户端的规则很简单,容易学习,容易维护,容易发布.在WEB系统中,打印的确是个烦人的问题 ...

  5. vue html页面打印功能vue-print

    vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格, 在网上找了一个打印组件vue-print-nb 使用方式 安装 npm install vue-print-nb --save ...

  6. js调用页面打印

    ----------------------调用页面打印-------------------------------- <body> <div id="divPrint& ...

  7. JSP 页面打印

    <HTML><HEAD><TITLE>javascript打印-打印页面设置-打印预览代码</TITLE> <META http-equiv=Co ...

  8. .net开发---自定义页面打印区域

    自定义页面打印区域 有3种办法: 办法一:将不需要打印的部位隐藏掉 Examp: <%-- (1)使用css样式,定义一个.noprint的class,将不打印的内容放入这个class内. -- ...

  9. web页面打印

    在使用的两种方式打印: 第一种:js如下 function doPrint() { allhtml = window.document.body.innerHTML; starstr = " ...

随机推荐

  1. [BZOJ 2299][HAOI 2011]向量 题解（裴蜀定理）

    [BZOJ 2299][HAOI 2011]向量 Description 给你一对数a,b,你可以任意使用(a,b), (a,-b), (-a,b), (-a,-b), (b,a), (b,-a), ...

  2. 一份最中肯的Java学习路线+资源分享（拒绝傻逼式分享）

    这是一篇针对Java初学者,或者说在Java学习路线上出了一些问题(不知道该学什么.不知道整体的学习路线是什么样的) 第一步:Java基础(一个月左右) 推荐视频: 下面的是黑马内部视频,我比较推荐的 ...

  3. Hadoop 上使用C 语言编程【转】

    转自:https://www.linuxidc.com/Linux/2012-04/58991.htm 今天尝试用C语言在Hadoop上编写统计单词的程序,具体过程如下: 一.编写map和reduce ...

  4. win10 安装IIS说明操作

    1.点左下角的Windows,所有应用,找到Windows系统,打开控制面板. 2.进入控制面板之后点击程序,可能你的控制面板和图片里的不太一样,不过没关系,找到程序两个字点进去就行. 3.接下来,在 ...

  5. Unity 网格 绘制

    网格绘制主要用是对Mesh进行操作,通过对vertex和triangles进行操作生成对应的面片: 这里首先得用到一个类:Triangulator(根据vertex生成triangles数组) usi ...

  6. springboot自定义SpringApplication启动类

    如果默认的SpringApplication不符合你的口味,你可以创建一个本地的实例并自定义它.例如,关闭banner你可以这样写: public static void main(String[] ...

  7. make distclean

    清空bin目录make dirclean 清空所有相关的东西,包括下载的软件包,配置文件,feeds内容等make distclean 这个命令会删除feeds目录及其下面的所有的文件,直接结果就是运 ...

  8. django-xadmin后台开发

    先通过pip命令行安装django<=1.9版本 示例:pip install django==1.9 从https://github.com/sshwsfc/xadmin下载xadmin源码解 ...

  9. android 通用 Intent

    通用 Intent 本文内容显示详细信息 闹钟 日历 相机 联系人/人员应用 电子邮件 文件存储 本地操作 地图 音乐或视频 新笔记 电话 搜索 设置 发送短信 网络浏览器 使用 Android 调试 ...

  10. 无效GRANT语句导致主从同步断开

    最近遇到一个主从同步断开的案例,是由于在执行GRANT语句时,授权对象给错了,也就可以理解为无效的GRANT语句,我们收到slave库同步断开的报警信息,然后去找问题,发现binlog有报错,报错提示 ...