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 相关文章推荐
Exitjs获取DataView中图片文件名
Nov 26 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
css配合jquery美化 select
Nov 29 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
写一个Vue Popup组件
Feb 25 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 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学习之流程控制实现代码
2011/06/09 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
jquery选择器简述
2015/08/31 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
JavaScript的词法结构精华篇
2018/10/17 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
python利用不到一百行代码实现一个小siri
2017/03/02 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
python日志logging模块使用方法分析
2019/05/23 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
销售职业生涯规划范文
2014/03/14 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
2014年个人售房协议书
2014/10/30 职场文书
员工福利申请报告
2015/05/15 职场文书
刑事附带民事代理词
2015/05/25 职场文书
对公司的意见和建议
2015/06/04 职场文书
springboot入门 之profile设置方式
2022/04/04 Java/Android