Print any part of the page using jQuery.print Plugin

by Posted on

In this tutorial I am going to show you jquery plugin to Print any part of the page element. This plugin is helpful to add quick print feature of any div element you can easily configure to print particular div, span, paragraph or any html entity. In short jQuery.print is a plugin for printing specific parts of a web page.
print-page-jquery


Print any part of the page using jQuery.print Plugin Integration Steps:

Use following quick steps to configure jQuery.print plugin on your web page to print specific part of web page.

Libraries

Include following js libraries on page, First include jquery core library on page after that include jQuery.print.js

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script> 
<script src="jQuery.print.js"></script>

HTML

Create sample div and Specify an unique ID to your html element which you want to make it printable.

<div id="printme">
Rohit Kumar - My Public NoteBook
</div>

Add print button on page, On click this button you can send selected div for print.

<button class="print"> Print this </button>



JS

Finally add following js on page to pass div id “printme” section for print by calling following function $.print()

<script>
$(function() {
  $(".print").click(function() {   
    $("#printme").print();
  });
});
</script>

You can pass more option in above function to customise your print options

$("#printme").print({
        	globalStyles: true,
        	mediaPrint: false,
        	stylesheet: null,
        	noPrintSelector: ".no-print",
        	iframe: true,
        	append: null,
        	prepend: null,
        	manuallyCopyFormValues: true,
        	deferred: $.Deferred(),
        	timeout: 750,
        	title: null,
        	doctype: '<!doctype html>'
	});

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information.



Published by admin