您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

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

作者:佚名    责任编辑:admin    更新时间:2022-06-22

 这篇文章主要介绍了JS选择打印内容,主要是把自己要打印的东西用一个DIV层抱起来,需要的朋友可以参考下

由于项目的需要在一个页面中选择打印内容。    把自己要打印的东西用一个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;  }    });    这样既可以实现局部选择打印和局部不选择打印