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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
基于jQuery试卷自动排版系统
Jul 18 Javascript
理解Javascript_12_执行模型浅析
Oct 18 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
Javascript复制实例详解
Jan 28 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
深入解析ES6中的promise
Nov 08 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
js轮播图代码分享
2016/07/14 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
node.js的http.createServer过程深入解析
2019/06/06 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
深入理解Python中各种方法的运作原理
2015/06/15 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
简单实现Python爬取网络图片
2018/04/01 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
应届生煤化工求职信
2013/10/21 职场文书
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
会计专业个人求职信范文
2014/01/08 职场文书
2014年法院工作总结
2014/11/24 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
靠谱准确的求职信
2019/04/02 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers