In this post I am going to share simple jQuery plugin which help you to print any html page or specific content or element of page just one click. This plugin is loaded lot’s of feature which help you to customize the printing methods and other things.
Features:
- Print specific & multiple DOM elements
- Preserve page CSS/styling
** or add new CSS; the world is your oyster! - Preserve form entries
- Canvas support
Libraries
Load the jQuery and printThis JS Library on Page.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">script> <script type="text/javascript" src="printThis.js">script> |
Basic Example
use the very basic method the print selected element.
$('selector').printThis(); |
Advanced Features:
$('#kitty-one, #kitty-two, #kitty-three').printThis({ importCSS: false, loadCSS: "", header: "" }); |
”
});
header & footer
$('#mySelector').printThis({ header: "" }); $('#mySelector').printThis({ footer: $('.hidden-print-header-content') }); |
”
});
$(‘#mySelector’).printThis({
footer: $(‘.hidden-print-header-content’)
});
Here are the list of options you can use to customize the plugins.
$("#mySelector").printThis({ debug: false, // show the iframe for debugging importCSS: true, // import parent page css importStyle: false, // import style tags printContainer: true, // print outer container/$.selector loadCSS: "", // path to additional css file - use an array [] for multiple pageTitle: "", // add title to print page removeInline: false, // remove inline styles from print elements removeInlineSelector: "*", // custom selectors to filter inline styles. removeInline must be true printDelay: 333, // variable print delay header: null, // prefix to html footer: null, // postfix to html base: false, // preserve the BASE tag or accept a string for the URL formValues: true, // preserve input/form values canvas: false, // copy canvas content doctypeString: '...', // enter a different doctype for older markup removeScripts: false, // remove script tags from print content copyTagClasses: false, // copy classes from the html & body tag beforePrintEvent: null, // function for printEvent in iframe beforePrint: null, // function called before iframe is filled afterPrint: null // function called before iframe is removed }); |
See live demo and download source code.
This awesome plugin is developed by tameemsafi. Visit their official github repository for more information and follow for future updates.
