Here is an awesome jQuery printing plugin that lets you to add print-page functionality to your web page / apps. The “PrintThis” plugin offers to print specific or multiple elements on a page. It can be useful to print images, canvas and plain text of a webpage with (optional) custom header & footers. Moreover, you can disable CSS styles and JavaScript from page.
Plugin Overview
| Plugin: | PrintThis |
| Author: | Jason Day and Samuel Rouse |
| Licence: | MIT Licence |
| Published: | January 17, 2024 |
| Repository: | Fork on GitHub |
| Dependencies: | jQuery 1.3.1 or Latest version |
| File Type: | zip archive (HTML, CSS & JavaScript ) |
| Package Size: | 386 KB |
Main Features
- Print a part or multiple parts of webpage.
- Support to print images and canvas elements.
- Preserve the form entries.
- Option to remove JavaScript, Inline styles & CSS from print text.
- Import style tags and much more…
How to Use PrintThis for Print Part of a Web Page:
1. Load the jQuery and PrintThis‘s JavaScript file into your web page.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- PrintThis Js --> <script type="text/javascript" src="printThis.js"></script>
2. Set unique id to specific part of page that you want to print. You can print images, canvas, div or plain text of the web page. Just add a unique id to your element that you want to print.
<p id="myText"> This is some text to print. You can add multiple paragraphs according to your needs... </p>
3. Finally call the PrintThis plugin with that id (myText) selector in jQuery document ready function.
$(document).ready(function(){
$("#myText").printThis();
});
Advance Configuration Options for print part of a web page with jquery
The following are some advance configuration options to create / customize PrintThis plugin (jQuery print part of a web page).
| Option | Description, Default, Type |
|---|---|
debug |
For developer mode, it show the iframe for debugging. Default: false, Type: Boolean.
$("#myText").printThis({
debug: false,
});
|
importCSS |
Import the stylesheet of page, print page with CSS styles. Default: true, Type: Boolean.
$("#myText").printThis({
importCSSL: true,
});
|
importStyle |
Import inline CSS styles between style tag. Default: false, Type: Boolean.
$("#myText").printThis({
importStyle: false,
});
|
printContainer |
Grab outer container as well as the contents of the selector. Default: true, Type: Boolean.
$("#myText").printThis({
printContainer: true,
});
|
loadCSS |
This option useful to add extra css file – use an array [] for multiple. Default: “”, Type: String.
$("#myText").printThis({
loadCSS: "path/to/my.css",
});
|
pageTitle |
Define title and print it to the top of page. Default: “”, Type: String.
$("#myText").printThis({
pageTitle: "My Custom Title",
});
|
removeInline |
This option Remove all inline styles from print elements. Default: false, Type: Boolean.
$("#myText").printThis({
removeInline: true,
});
|
printDelay |
Define the print delay in milliseconds. Default: 333, Type: Number.
$("#myText").printThis({
printDelay: 1500,
});
|
header & footer |
Define the custom header and footer for HTML page. Default: null, Type: String.
$("#myText").printThis({
header: "Custom Page Header",
footer: "Custom Page Footer",
});
|
base |
Preserve the BASE tag, or accept a string for the URL. Default: false, Type: Boolean/String.
$("#myText").printThis({
base: "url here",
});
|
formValues |
Also print user input values in forms. Default: true, Type: Boolean.
$("#myText").printThis({
formValues: true,
});
|
canvas |
Copy canvas elements. Default: false, Type: Boolean.
$("#myText").printThis({
canvas: false,
});
|
doctypeString |
Define the document type of webpage. Useful for adding document type for older markup. Default: ““, Type: String.
$("#myText").printThis({
doctypeString: "",
});
|
hasModal |
Remove script tags from print content. Default: false, Type: Boolean.
$("#myText").printThis({
removeScripts: false,
});
|
copyTagClasses |
This option is useful to copy classes from the html & body tag. Default: false, Type: Boolean.
$("#myText").printThis({
copyTagClasses: false,
});
|
PrintThis Callback Functions
The PrintThis plugin provide three custom callback functions that can be execute to fully configure it into your project. By default, these options are null with type function.
1. Callback function for printEvent in iframe.
$("#myText").printThis({
beforePrintEvent: function(){
//your code to execute
}
});
2. Function called before iframe is filled.
$("#myText").printThis({
beforePrint: function(){
//your code to execute
}
});
3. Function called before iframe is removed.
$("#myText").printThis({
afterPrint: function(){
//your code to execute
}
});
Similar Code Snippets:
Create Scratch Card using JavaScript & HTML5 Canvas
Bootstrap Notification Bar with Close Button
jQuery Scroll to Next Section on Scroll - snapScroll.js
JavaScript Timesheet Calculator
Simple Range Slider Plugin for jQuery
Bootstrap 4 Modern Pagination with jQuery
Shining Effect on Text with CSS3 and jQuery - shineText
jQuery Simple Tooltip on Hover - simpleTooltip
jQuery Flash Message Box to Show Notifications
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.