Preview Page In A Modal Popup Before Printing - print-preview.js

A jQuery-powered custom print preview plugin that allows the user to preview the page with a print stylesheet in a modal popup before printing.

How to use it:

1. Include jQueyr library and the print-preview plugin's files on the page.

<link rel="stylesheet" href="/path/to/src/print-preview.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/src/jquery.print-preview.js"></script>

2. Add a print preview link to your webpage.

$(function(){
  $('body').prepend('<a class="print-preview">Print This Page</a>');
  $('a.print-preview').printPreview();
});

3. Load the print stylesheeet in your document. That's it.

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

4. Customize the print preview link.

a.print-preview {
  background: url(images/icon-print-preview.png) no-repeat 0 0;
  cursor: pointer;
  display: block;
  margin: 0 0 20px;
  padding: 0 0 0 35px;
  line-height: 20px;
}

---

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