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

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

把自己要打印的东西用一个DIV层抱起来。例如:

复制代码 代码如下:


<!-- 信访事项转办告知单Start -->
<div >
<div>
<div>(告知单编号:${zjxfItemUser.acceptedNo })</div>
<div ><span>信访事项转办告知单</span></div>
${zjxfItemUser.userName }:(信访人名称)<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span></span>,本机关(或单位)依法受理了你(或你们)提出的${zjxfItemUser.subject }信访事项,
该信访事项属于XXX职权范围内的事项,根据《信访条例》的有关规定,本机关已于XXXX年XX月XX日将有关材料转交给XXX处理,请及时与其联系。<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;特此告知。<br />
<div>(盖${zjxfProcessOver.subOrgname }专用章或公章)</div>
<div><span></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=https://www.jb51.net/article/\""+ baseURL +"/zjxf/common/css/common.css\" type=https://www.jb51.net/article/\"text/css\" rel=https://www.jb51.net/article/\"stylesheet\" /> " +
"<link href=https://www.jb51.net/article/\""+ baseURL +"/zjxf/common/css/table.css\" type=https://www.jb51.net/article/\"text/css\" rel=https://www.jb51.net/article/\"stylesheet\" /> " +
"<link href=https://www.jb51.net/article/\""+ baseURL +"/zjxf/common/css/form.css\" type=https://www.jb51.net/article/\"text/css\" rel=https://www.jb51.net/article/\"stylesheet\" />" +
"<link href=https://www.jb51.net/article/\""+ baseURL +"/zjxf/common/css/tab.css\" type=https://www.jb51.net/article/\"text/css\" rel=https://www.jb51.net/article/\"stylesheet\" />" +
"<link href=https://www.jb51.net/article/\""+ baseURL +"/zjxf/common/css/print.css\" type=https://www.jb51.net/article/\"text/css\" rel=https://www.jb51.net/article/\"stylesheet\" />" ;
$(CSS).appendTo("#" + formName);
window.document.body.innerHTML = $("#" + formName).html();
window.print();
window.document.body.innerHTML = htmlInfo;
}

});


这样既可以实现局部选择打印和局部不选择打印

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdywxf.html