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 相关文章推荐
js 事件小结 表格区别
Aug 13 Javascript
在线编辑器中换行与内容自动提取
Apr 24 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
详解iframe与frame的区别
Jan 13 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
a标签调用js的方法总结
Sep 05 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 Class 文章
2007/04/04 PHP
PHP 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
php实现无限级分类
2014/12/24 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
详解vue组件基础
2018/05/04 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
Python实现八大排序算法
2016/08/13 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
高中竞选班长演讲稿
2014/04/24 职场文书
教师评语大全
2014/04/28 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
工作所在部门证明
2014/09/21 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers