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生成随机数之random函数随机示例
Dec 20 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
ECMAscript 变量作用域总结概括
Aug 18 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 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判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
详解js类型判断
2018/05/22 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
小学生感恩演讲稿
2014/04/25 职场文书
员工安全生产责任书
2014/07/22 职场文书
民主评议党员工作总结
2014/10/20 职场文书
物业公司管理制度
2015/08/05 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js