JS implementation of partial select print and partial do not select print

  • 2020-03-30 02:31:09
  • OfStack

Select the print content on a page as required by the project.

Pick up what you want to print with a DIV layer. Such as:
 
<!--  Notice sheet for handling of complaint reporting Start --> 
<div id="itemVrbjForm" style="font-family:' Imitation song dynasty style typeface ',' Song typeface ';font-size: 18px; margin-top: 290px;" > 
<div style="width: 600px; margin:0 auto;"> 
<div style="float: right;margin-top: -40px;"> (note no. : ${zjxfItemUser.acceptedNo } ) </div> 
<div id="title" style="margin-top: 40px;" ><span> Notice sheet for handling of complaint reporting </span></div> 
${zjxfItemUser.userName } (name of complainant) <br/> 
         
<span id="itemVrbjTime"></span> This organ (or unit) has accepted your (or yours) proposal according to law ${zjxfItemUser.subject } Complaint reporting,  
 The complaint reporting matter belongs to XXX In accordance with the relevant provisions of the regulations on complaint reporting, the authority has completed the XXXX years XX month XX Deliver the relevant materials to XXX Handle, please contact in time. <br/> 
          I hereby inform you. <br /> 
<div style="margin-top:50px;margin-right: 20px;float: right;"> (cover ${zjxfProcessOver.subOrgname } Special seal or official seal) </div> 
<div style="margin-top:90px;margin-right: -190px;float: right;"><span id="itemVrbjEndTime"></span></div> 
</div> 
</div> 
<!--  Notice sheet for handling of complaint reporting End --> 

There is no need to print in the middle, also with a DIV layer included. Using CSS styles. This is done by referring to class="noprint" in a layer that does not need to be printed
 
<style type="text/css" media="print"> 
.noprint{visibility: none;} 
</style> 

JS code:

Note: the style will be lost when you choose to print, you need to add your print before printing.
 
$(function(){ 

$("#print").click(function(){ 

var html = window.document.body.innerHTML; 

exportCSS("itemVrbjForm",html); 

}); 

//Import the style into the select print
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; 
} 

}); 

In this way, local selection printing and local non-selection printing can be achieved

Related articles: