Jqprint实现页面打印


Posted in Javascript onJanuary 06, 2017

好些项目需要实现页面打印,特别是一些后台管理类系统,下面介绍一款轻量级的打印插件:

1、实现页面打印要引入jQuery和Jqprint。点击下载Jqprint插件

<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script language="javascript" src="jquery.jqprint-0.3.js"></script>

2、HTML代码:

<div id="print-area">
 <table>
 <tr>
 <td>test</td>
 <td>test</td>
 <td>test</td>
 <td>test</td>
 <td>test</td>
 </tr>
 <tr>
 <td>test</td>
 <td>test</td>
 <td>test</td>
 <td>test</td>
 <td>test</td>
 </tr>
 <tr>
 <td>test</td>
 <td>test</td>
 <td>test</td>
 <td>test</td>
 <td>test</td>
 </tr>
 <tr>
 <td>test</td>
 <td>test</td>
 <td>test</td>
 <td>test</td>
 <td>test</td>
 </tr>
 <tr>
 <td>test</td>
 <td>test</td>
 <td>test</td>
 <td>test</td>
 <td>test</td>
 </tr>
 </table>
 </div>
 <input type="button" onclick=" print()" value="打印">

3、JavaScript代码:

<script language="javascript">
 function print(){
 $("#print-area").jqprint({
 debug: false, 
 importCSS: true, 
 printContainer: true, 
 operaSupport: false 
 });
 }
</script>

4、属性

  1) debug: false,          //如果是true则可以显示iframe查看效果(iframe默认高和宽都很小,可以再源码中调大),默认是false 

  2) importCSS: true,       //true表示引进原来的页面的css,默认是true。(如果是true,先会找$("link[media=print]"),若没有会去找$("link")中的css文件) 

  3) printContainer: true,  //表示如果原来选择的对象必须被纳入打印(注意:设置为false可能会打破你的CSS规则)。 

  4) operaSupport: false    //表示如果插件也必须支持歌opera浏览器,在这种情况下,它提供了建立一个临时的打印选项卡。默认是true

5、特殊打印样式

如果在打印时需要独特的css样式,除了可以直接写在style属性内还可以通过

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

来引用外部css文件中的样式。这样的好处是该样式只会在打印时才应用。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
微信小程序登录换取token的教程
May 31 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
node.js实现上传文件功能
Jul 15 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
ES6中的类(Class)示例详解
Dec 09 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 #Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 #Javascript
jQuery编写网页版2048小游戏
Jan 06 #Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 #Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 #Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 #Javascript
使用BootStrap进行轮播图的制作
Jan 06 #Javascript
You might like
php部分常见问题总结
2008/03/27 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
法警的竞聘演讲稿
2014/01/02 职场文书
酒店中秋节促销方案
2014/01/30 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
工会工作先进事迹
2014/08/18 职场文书
基层党组织整改方案
2014/10/25 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
《打电话》教学反思
2016/02/22 职场文书
Python 内置函数速查表一览
2021/06/02 Python
分享3个非常实用的 Python 模块
2022/03/03 Python
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server