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

2014-04-03 11

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

把自己要打印的东西用一个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 静态对象和构造函数的使用和公私问题
Mar 02 6
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 6
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 10
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 5
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 10
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 5
解决vue单页面应用中动态修改title问题
Jun 09 10
手机访问当前页面