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中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
Vue利用canvas实现移动端手写板的方法
May 03 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 Javascript
vue实现弹幕功能
Oct 25 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
JavaScript 实现继承的几种方式
Feb 19 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
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
PHP新手上路(二)
2006/10/09 PHP
PHP文件下载类
2006/12/06 PHP
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
JavaScript多线程详解
2015/08/12 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
Python3实现购物车功能
2018/04/18 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
机械工程师岗位职责
2014/06/16 职场文书
银行自荐信怎么写
2015/03/05 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL