jQuery Plugin For Html Print Preview - printPreview

File Size: 4.18 KB
Views Total: 37634
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Html Print Preview - printPreview

Print-Preview is a jQuery plugin that allows a "Print Preview" button to open a new browser window displaying specific print area of your webpage.

How to use it:

1. Load jQuery library and the printPreview.js script in the web page.

<script src="jquery.min.js"></script>
<script src="js/printPreview.js"></script>

2. Create a Print Preview button on the webpage.

<button id="btnPrint">Print Preview</button>

3. Enable the plugin and specify the specific part of the webpage you want to print.

$("#btnPrint").printPreview({
  obj2print:'#main'
});

4. Customize the print preview window.

// additonal CSS styles
style:'', 

// the width of the print preview window
width: '670',

// the width of the print preview window
height:screen.height,

// top position
top:0,  

// left position
left:'center',

// resizable
resizable : 'yes',

// display scrollbar
scrollbars:'yes',

// display status
status:'no', 

// title of the print preview window
title:'Print Preview'

Change log:

2015-08-24

  • multiple seperate window and input values

This awesome jQuery plugin is developed by alamnaryab. For more Advanced Usages, please check the demo page or visit the official website.