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 相关文章推荐
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
Angular的MVC和作用域
Dec 26 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 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
DSP接收机前端设想
2021/03/02 无线电
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
cument.execCommand()用法深入理解
2012/12/04 Javascript
JS中操作JSON总结
2020/12/06 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
Python3 replace()函数使用方法
2018/03/19 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
.net面试题
2016/09/17 面试题
高中军训广播稿
2014/01/14 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
学习退步检讨书
2014/09/28 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js