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 计算图片加载数量的代码
Jan 01 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
实例分析JS与Node.js中的事件循环
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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
PHP 一个页面执行时间类代码
2010/03/05 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
js加解密 脚本解密
2008/02/22 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
js动态切换图片的方法
2015/01/20 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
讲解Python中fileno()方法的使用
2015/05/24 Python
解析Python编程中的包结构
2015/10/25 Python
Python模块搜索路径代码详解
2018/01/29 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
总经理文秘岗位职责
2014/02/03 职场文书
函授本科自我鉴定
2014/02/04 职场文书
批评与自我批评材料
2014/02/15 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
财务管理专业求职信
2014/06/11 职场文书
Python基础之元编程知识总结
2021/05/23 Python
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS