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 相关文章推荐
javascript getElementsByTagName
Jan 31 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 Javascript
JS script脚本中async和defer区别详解
Jun 24 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安全编程之加密功能
2006/10/09 PHP
php 表单数据的获取代码
2009/03/10 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
JAVA高级程序员面试题
2013/09/06 面试题
毕业自荐信
2013/12/16 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
园林系毕业生求职信
2014/06/23 职场文书
李强优秀员工观后感
2015/06/16 职场文书
毕业证明模板
2015/06/19 职场文书
信用卡工作证明范本
2015/06/19 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
在js中修改html body的样式
2021/11/11 Javascript
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS