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 17 Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
微信小程序背景音乐开发详解
Dec 12 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
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
python write无法写入文件的解决方法
2019/01/23 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
pandas的qcut()方法详解
2019/07/06 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
幼儿园元旦亲子活动方案
2014/02/17 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
毕业实习证明范本
2015/06/16 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书