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中cookie的使用详细分析
May 28 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
浅析JS异步加载进度条
May 05 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
js时间查询插件使用详解
Apr 07 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 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
PHP页面间传递参数实例代码
2008/06/05 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
Python Tkinter基础控件用法
2014/09/03 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
庆元旦文艺演出主持词
2014/03/27 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
2015年暑假工作总结
2015/07/13 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang