jQuery Regional Printing Function Code Details

  • 2021-06-28 11:15:57
  • OfStack

To control printing styles with CSS, you need to set the style media= "print" and the style display attribute of elements on the page that do not require printing to none.As in DEMO, I style the header, footer, and other elements that do not require printing as follows:


<style type="text/css" media="print"> 
#header,.top_title,#jqprint,#footer,#cssprint h3{display:none} 
</style> 

Print plug-in printArea.js with jQuery


$(function(){ 
$("#print_btn").click(function(){ 
$("#my_area").printArea(); 
}); 
}); 

There is one piece of code in DEMO:


<p><a href="#" id="print_btn"> Click here to print >></a></p> 
<div id="my_area"> 
... Print area ...<br/> 
</div> 

Call the printArea.js plug-in when you click the Print button.The plug-in also provides configurable parameters for use: $(element). printArea (option).

Parameter settings:

1, mode: mode, triggers mode when the print button is clicked, defaults to iframe, and opens a new window page for printing when set to popup.

2. popTitle: Set the title of the newly opened window, which is empty by default.

3. popClose: Whether to close the window after printing, defaulting to false.

PS:IE Browser Print Page Remove Header Footer Web Address Method: File- > Page settings, empty the input boxes of the page and footer.


Related articles: