使用jqprint插件完成页面打印
使用jqprint插件完成页面打印
jqprint是一个基于jQuery编写的页面打印的一个小插件,但是不得不承认这个插件确实很厉害,最近的项目中帮了我的大忙,在Web打印的方面,前端的打印基本是靠window.print()的方式进行打印的,而这个插件在其基础上进行了进一步的封装,可以打印网页上的某个区域,这是个亮点。比如说现在要打印如下的一个效果:
我们可以通过写代码完成上述的效果,然后单击网页上的某个按钮,在按钮的处理方法里调用jqprint(),来完成这个区域的的打印显示的操作,首先要获取这个区域,然后调用一个方法即可了,如下所示:
- $("#visaReport").jqprint({});
这就是一个简单的操作,但是实际需要的时候,有时我们页面显示样式和我们打印的样式是有些区别的,幸好CSS声明的地方提供了一个media的属性,我们可以指定其输出的方式为print,即media=print的这个属性,写了这个属性之后,所引入CSS的一些样式在打印的时候才会生效了,通过在打印的时候,我们可以通过样式去改变当前网页的显示内容,及显示的样式。先来看下代码吧!
- <!DOCTYPE html>
- <html>
- <head>
- <metacharsetmetacharset="UTF-8"/>
- <title>效果测试</title>
- <linkhreflinkhref="printShou.css" rel="stylesheet"type="text/css" media="print"/>
- <scripttypescripttype="text/javascript"src="jquery-1.7.2.js"></script>
- <scripttypescripttype="text/javascript"src="jquery.jqprint-0.3.js"></script>
- <scripttypescripttype="text/javascript">
- $(function()
- {
- $("#btn1").click(function()
- {
- $("#visaReport").jqprint({});
- });
- });
- </script>
- </head>
- <body>
- <input type="button"id="btn1" value="打印"/>
- <divclassdivclass="visaReport" id="visaReport">
- <divclassdivclass="visa_head">
- <divclassdivclass="visa_head_title">XX中心</div>
- <divclassdivclass="visa_head_title">确认及收据</div>
- </div>
- <divclassdivclass="visa_body">
- <div>
- <divclassdivclass="visa_person">
- <div class="visa_label">姓名:xiaoming</div>
- <div class="visa_label">日期:2014/12/30</div>
- </div>
- <tableclasstableclass="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>
- <tableclasstableclass="visa_total_fee">
- <tr>
- <tdstyletdstyle="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插件完成页面打印相关推荐
- Vue使用Print插件实现页面打印功能/打印列表
Vue使用Print插件实现页面打印 示例 官网地址可以下载最新版 官网 下载 npm 安装 npm install print-js --save npm安装时将库导入项目(main.js) imp ...
- jq jqprint 设置页脚_jQuery 插件 jqprint 实现浏览器页面打印和设置页眉页脚
使用 jqprint 插件实现浏览器页面打印,需要用到两个js文件,jquery.js 和 jqprint.js,本文使用 jquery-1.4.4.min.js,jquery.jqprint-0.3 ...
- 页面打印插件 jquery.jqprint.js 插件使用实例
页面打印插件 jquery.jqprint.js 插件使用实例 jquery.jqprint.js 插件下载 jqprint 是一个基于jQuery编写的页面打印的一个小插件,可以对页面指定元素的内容 ...
- jqprint 分页打印_JS实现页面打印(整体、局部)
我们在网页开发过程中经常会有打印页面的需求,通过JS来实现的方法有很多,这里我做了一个整理,供大家参考. 方式一:window.print() 整体打印 1打印 现在就轻松实现了页面的打印,但是这种方 ...
- jqprint 分页打印_Jqprint实现页面打印
好些项目需要实现页面打印,特别是一些后台管理类系统,下面介绍一款轻量级的打印插件: 1.实现页面打印要引入jQuery和Jqprint.点击下载Jqprint插件 2.HTML代码: test tes ...
- Jqprint实现页面打印
好些项目需要实现页面打印,特别是一些后台管理类系统,下面介绍一款轻量级的打印插件: 1.实现页面打印要引入jQuery和Jqprint.点击下载Jqprint插件 <scriptlanguage ...
- html页面打印插件,分享8款网站开发中最好用的打印页面插件
原标题:分享8款网站开发中最好用的打印页面插件 通常浏览器是通过打印命令来确定需要打印的内容,但它可以在 jQuery 插件打印页面插件的帮助下打印一个特定区域的内容..因此,您可以使用这些 jQue ...
- 开源的javascript实现页面打印功能,兼容所有的浏览器(情况属实)
这篇文章完全是属于技术文章,也是记录一下自己在项目当中遇到的坑爹问题啊,因为是B/S的程序,所以打印功能还是必须要有的,对于打印我选择了一个js插件,发现非常的简单和方便,所以这里拿出来和大家分享一下 ...
- CSDN页面打印不正常的解决方法
CSDN页面打印不正常的原因可能有很多,以下是一些可能的原因: 页面布局:CSDN页面可能采用了复杂的布局,导致在打印时页面元素无法正确显示. 样式表:页面的CSS样式表可能不支持打印或者不适合打印. ...
最新文章
- matlab电路环流,基于MATLAB的单芯电缆金属护套环流分析研究
- FESCAR:阿里重磅开源分布式事务解决方案
- 干死该死的横向滚动条
- 1640. Check Array Formation Through Concatenation 能否连接形成数组
- HXSafeGuard工程通过VS2010编译未安装VS2008出现以下错误
- linux重启网卡提示tent,linux
- ajax中加html,向DIV中写入HTML(AJAX高手赐教)
- 【TSP】基于matlab改进的蚁群算法求解旅行商问题【含Matlab源码 242期】
- linux设置自动获取ip命令,详解如何设置CentOS 7开机自动获取IP地址
- 千锋web前端教学知识点记录及个人理解2
- 渥太华计算机读研的好学校,加拿大硕士留学:渥太华最好的大学硕士项目
- CSDN 社区大趴-北京站 圆满结束
- 汉信码今发布:国家自主研发的二维码技术
- mac os 录屏快捷键_Mac录屏软件集合,自带不够专业来凑
- 金一文化推出“B站2233 x中央芭蕾舞团”限量手办
- word将一个文档的样式导入到另一个文档
- 计算机毕业设计Java医院预约挂号系统(系统+源码+mysql数据库+Lw文档)
- pic c语言 位标志,PIC单片机状态寄存器中的C(进位/借位位标志)
- LocalDate获取本日所在周的周一和周日
- servlet3.1规范翻译:前言
热门文章
- C语言矩阵N*N旋转的算法(附完整源码)
- docker 外部连接_如何从主机外部(同一网络)连接到Docker容器[Windows]
- python用户输入一行字符串_python字符串练习
- Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法
- Linux sed 打印模式空间p命令使用案例
- 用html5做一个简单的作品,html5 canvas 简单画板实现代码
- fprintf,sprintf,sscanf,fscanf
- (一)面试题:TCP三次握手
- Nginx 常见问题解决
- NuGet在Push的时候提示“远程服务器返回错误:(403)已禁用”问题解决