Page Print Preview Popup Plugin With jQuery - print-preview.js

print-preview.js is a simple yet useful jQuery plugin that allows you to display the printed version of your web page in a popup window before printing out.

How to use it:

1. Add the jQuery print-preview.js plugin and other required resources to the web page.

<link rel="stylesheet" href="print-preview.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.print-preview.js"></script>

2. Note that your web page must have a print style sheet that changes the appearance of your web page when it's printed on a paper.

<link rel="stylesheet" href="css/print.css" media="print">

3. Create a trigger link to toggle the preview popup before printing.

<a class="print-preview">Print this page</a>

4. Initialize the print preview plugin and done.

$('a.print-preview').printPreview();

5. Add keybinding (not recommended for production use).

$(document).bind('keydown', function(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code == 80 && !$('#print-modal').length) {
      $.printPreview.loadPrintPreview();
      return false;
  }            
});

6. Override the default styles of the preview popup.

#print-modal {
  background: #FFF;
  position: absolute;
  left: 50%;
  margin: 0 0 0 -465px;
  padding: 0 68px;
  width: 794px;
  box-shadow: 0 0 20px #000;
  -moz-box-shadow: 0 0 20px #000;
  -webkit-box-shadow: 0 0 10px #000;
}

---

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