Site icon SumTips

Give Your Site Visitors a Quick Print Preview Option, Ctrl+P Hotkey

jQuery Print Preview plugin provides your site visitors a quick, instant print preview of the active page before actually printing. The preview can be invoked using a button on the page or by pressing Ctrl+P keyboard shortcut. You can see the plugin in action here.

Implementing Print Preview


<link rel="stylesheet" href="/path-to/print.css" type="text/css" media="print" />
<script src=""> </script>

Using the plugin:

print-preview.css and jquery.print-preview.js contains the code that generates the preview. These files can be found inside ‘src’ folder in the downloadable tarball.

<link rel="stylesheet" href="print-preview.css" type="text/css" media="screen">
<script src="jquery.print-preview.js" type="text/javascript" charset="utf-8"> </script>

This is the JavaScript that invokes the preview:

<script type="text/javascript">
    $ (function () {

            // Add a print preview link
            $('#aside').prepend('<a class="print-preview">Print this page</a>');

            // Initialize plugin

            // Trigger when Ctrl+P is pressed
            $(document).bind('keydown', function(e) {
                var code = (e.keyCode ? e.keyCode : e.which);
                if (code == 80 && !$('#print-modal').length) {
                    return false;

Supported Browsers:

This plugin works with pretty much all browsers.

Download: jQuery Print Preview plugin