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 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.
|
Rohit Kumar – My Public NoteBook
Add print button on page, On click this button you can send selected div for print.
<button class="print"> Print this > |
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: '' }); |
See live demo and download source code.
See official github repository for more information.