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: May 16, 2019
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
   }
});

Be the first to comment

Leave a Reply

Your email address will not be published.


*