JS实现局部选择打印和局部不选择打印


Posted in Javascript onApril 03, 2014

由于项目的需要在一个页面中选择打印内容。

把自己要打印的东西用一个DIV层抱起来。例如:

<!-- 信访事项转办告知单Start --> 
<div id="itemVrbjForm" style="font-family:'仿宋','宋体';font-size: 18px; margin-top: 290px;" > 
<div style="width: 600px; margin:0 auto;"> 
<div style="float: right;margin-top: -40px;">(告知单编号:${zjxfItemUser.acceptedNo })</div> 
<div id="title" style="margin-top: 40px;" ><span>信访事项转办告知单</span></div> 
${zjxfItemUser.userName }:(信访人名称)<br/> 
         
<span id="itemVrbjTime"></span>,本机关(或单位)依法受理了你(或你们)提出的${zjxfItemUser.subject }信访事项, 
该信访事项属于XXX职权范围内的事项,根据《信访条例》的有关规定,本机关已于XXXX年XX月XX日将有关材料转交给XXX处理,请及时与其联系。<br/> 
         特此告知。<br /> 
<div style="margin-top:50px;margin-right: 20px;float: right;">(盖${zjxfProcessOver.subOrgname }专用章或公章)</div> 
<div style="margin-top:90px;margin-right: -190px;float: right;"><span id="itemVrbjEndTime"></span></div> 
</div> 
</div> 
<!-- 信访事项转办告知单End -->

中间有不需要打印了,也用一个DIV层包含起来。利用CSS样式中的。在不需要打印的层中引用class="noprint"就搞定了
<style type="text/css" media="print"> 
.noprint{visibility: none;} 
</style>

JS代码:

注意:在选择打印的时候样式会丢失,需要在打印之前加上你的打印即可。

$(function(){ $("#print").click(function(){ 
var html = window.document.body.innerHTML; 
exportCSS("itemVrbjForm",html); 
}); 
//导入样式到选择打印中 
function exportCSS(formName,htmlInfo){ 
var CSS = "<link href=\""+ baseURL +"/zjxf/common/css/common.css\" type=\"text/css\" rel=\"stylesheet\" /> " + 
"<link href=\""+ baseURL +"/zjxf/common/css/table.css\" type=\"text/css\" rel=\"stylesheet\" /> " + 
"<link href=\""+ baseURL +"/zjxf/common/css/form.css\" type=\"text/css\" rel=\"stylesheet\" />" + 
"<link href=\""+ baseURL +"/zjxf/common/css/tab.css\" type=\"text/css\" rel=\"stylesheet\" />" + 
"<link href=\""+ baseURL +"/zjxf/common/css/print.css\" type=\"text/css\" rel=\"stylesheet\" />" ; 
$(CSS).appendTo("#" + formName); 
window.document.body.innerHTML = $("#" + formName).html(); 
window.print(); 
window.document.body.innerHTML = htmlInfo; 
} 
});

这样既可以实现局部选择打印和局部不选择打印
Javascript 相关文章推荐
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 #Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 #Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 #Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 #Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 #Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 #Javascript
javascript实现des解密加密全过程
Apr 03 #Javascript
You might like
php 缓存函数代码
2008/08/27 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
php异常处理使用示例
2014/02/25 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
php字符串分割函数用法实例
2015/03/17 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
php文件上传类的分享
2017/07/06 PHP
java解析json方法总结
2019/05/16 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
Python装饰器语法糖
2019/01/02 Python
python双向链表原理与实现方法详解
2019/12/03 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
施工资料员的岗位职责
2013/12/22 职场文书
小学生评语大全
2014/04/18 职场文书
节电标语大全
2014/06/23 职场文书
考研导师推荐信范文
2015/03/27 职场文书
团结友爱主题班会
2015/08/13 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
Oracle 区块链表创建过程详解
2021/05/15 Oracle