jQuery实现区域打印功能代码详解


Posted in Javascript onJune 17, 2016

使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none。如DEMO中,我将页头页脚及其他不需要打印的元素的样式设置如下:

<style type="text/css" media="print"> 
#header,.top_title,#jqprint,#footer,#cssprint h3{display:none} 
</style>

用jQuery打印插件printArea.js

$(function(){ 
$("#print_btn").click(function(){ 
$("#my_area").printArea(); 
}); 
});

DEMO中有这样一段代码:

<p><a href="#" id="print_btn">点击这里打印>></a></p> 
<div id="my_area"> 
...打印区域...<br/> 
</div>

当单击打印按钮时,调用件printArea.js插件。该插件还提供了一些参数可配置,使用方法:$(element).printArea(option)。

参数设置:

1、mode:模式,当点击打印按钮时触发模式,默认为iframe,当设置为popup则会新开一个窗口页面打印。

2、popTitle:设置新开窗口的标题,默认为空。

3、popClose:完成打印后是否关闭窗口,默认为false。

PS:IE浏览器打印页面取出页眉页脚网址的方法:文件->页面设置,将页面和页脚的输入框清空即可。

以上所述是小编给大家介绍的jQuery实现区域打印功能代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
checkbox 复选框不能为空
Jul 11 Javascript
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
JS实现canvas简单小画板功能
Jun 23 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 Javascript
javascript日期比较方法实例分析
Jun 17 #Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 #Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 #Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 #Javascript
JS中递归函数
Jun 17 #Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 #Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 #Javascript
You might like
Redis构建分布式锁
2017/03/28 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
python 实现线程之间的通信示例
2020/02/14 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
员工自我鉴定范文
2013/10/06 职场文书
缓刑人员的思想汇报
2014/01/11 职场文书
医学专业自荐信
2014/06/14 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
员工工作自我评价
2014/09/26 职场文书
司机个人年终总结
2015/03/03 职场文书
文员岗位职责范本
2015/04/16 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技