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

前端技术 2023/09/08 JavaScript
由于项目的需要在一个页面中选择打印内容。

把自己要打印的东西用一个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;
}

});

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

本文地址：https://www.stayed.cn/item/20815

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案