Print Specific Element With Stylesheet And Custom Header/Footer - Kinzi Print

Print Specific Element With Stylesheet And Custom Header/Footer - Kinzi Print
File Size: 4.23 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The Kinzi Print jQuery plugin puts a specific element in an iframe and then print it with styles and custom header/footer elements when needed.

More features:

  • Allows to import internal/external stylesheet and inline CSS styles.
  • Allows to include the markup of the parent container.
  • Allows to specify a time to wait before executing the print() method.

How to use it:

1. Load the Kinzi Print plugin after the latest jQuery library (slim build is recommended).

<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/inzi.print.min.js"></script>

2. Call the function kinziPrint on the target element you'd like to print. That's it.

<div class="example">
  <h2>Text To Print</h2>
  <p>More Content To Print</p>
</div>
$(function(){
  $('.example').kinziPrint();
});

3. Determing whether or not to include CSS while printing.

$('.example').kinziPrint({

  // import stylesheet
  importCSS: true,

  // import CSS styles
  importStyle: false,

  // import additional stylesheet
  loadCSS: ''
  
});

4. Determing whether or not to include the markup of the selected container.

$('.example').kinziPrint({

  printContainer: true
  
});

5. Determine the time to wait before pringting.

$('.example').kinziPrint({

  printDelay: 500
  
});

6. Include custom header/footer elements.

<h1>Kinzi Print Example</h1>
<footer>I Am The Footer</footer>
$('.example').kinziPrint({
  header: $('h1').html(),
  footer: $('footer').html()
});

7. Enable/disable the debug mode. This will show an iframe element on the page while printing.

$('.example').kinziPrint({

  debug: false
  
});

8. Set the base URL/target for all URLs in the iframe:

  • _blank
  • _parent
  • _self
  • _top
  • framename
$('.example').kinziPrint({

  base: ''
  
});

This awesome jQuery plugin is developed by mousaalsheikh. For more Advanced Usages, please check the demo page or visit the official website.