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 相关文章推荐
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
js内置对象 学习笔记
Aug 01 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
基于layui数据表格以及传数据的方式
Aug 19 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
许愿墙中用到的函数
2006/10/07 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
C/C++程序员常见面试题二
2015/11/19 面试题
广州一家公司的.NET面试题
2016/06/11 面试题
村优秀党员事迹材料
2014/01/15 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书