Print Part of a Web Page with jQuery PrintThis Plugin

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
   }
});

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...