JS选择打印

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

把自己要打印的东西用一个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/>
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   <span id="itemVrbjTime"></span>，本机关（或单位）依法受理了你（或你们）提出的${zjxfItemUser.subject }信访事项，
   该信访事项属于XXX职权范围内的事项，根据《信访条例》的有关规定，本机关已于XXXX年XX月XX日将有关材料转交给XXX处理，请及时与其联系。<br/>
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;特此告知。<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;
 }

});

 

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