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 相关文章推荐
js 颜色选择器(兼容firefox)
Mar 05 Javascript
js 鼠标点击事件及其它捕获
Jun 04 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
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查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
JS类的封装及实现代码
2009/12/02 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
JS实现音乐钢琴特效
2020/01/06 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
个人简历自荐信
2013/12/05 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
房地产融资计划书
2014/01/10 职场文书
父母寄语大全
2014/04/12 职场文书
大学学习计划书范文
2014/05/02 职场文书
家长学校培训材料
2014/08/20 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
挂职个人工作总结
2015/03/05 职场文书
实践论读书笔记
2015/06/29 职场文书
庆七一晚会主持词
2015/06/30 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js