etimbo / jquery-print-preview-plugin

jQuery plugin for print preview (modal window)

jQuery Print Preview plugin

The jQuery Print Preview plugin is designed to provide visitors with a preview of the print version of a web site. Unlike traditional print previews this plugin brings in all content and print styles within a modal window.

Check out the demo

Usage

Prerequisites:

• jQuery
• A print stylesheeet with a media="print" attribute

Using the plugin:

1. Pour in plugin CSS

2. Add a print preview link and initalise the plugin like so

   $('#foo').prepend('Print this page'); $('a.print-preview').printPreview();

Supported Browsers

• Internet Explorer 6, 7, 8 and 9
• Safari
• Google Chrome
• Firefox

Authors

Developed by Tim Connell. Released in conjunction with Sitepoint/Design Festival.

Licence

Copyright 2011, Tim Connell Licensed under the GPL Version 2 license http://www.gnu.org/licenses/gpl-2.0.html

Download

Grab the tarball containing source files and demo.

jquery-print-preview-plugin's Issues

Pesapal iframe conflict

Hi, i am using pesapal to process payments but the iframe that displays the payments page prevents the preview from initializing. Any ideas?

Thank you all.

Compatibility jQuery 3

Hi all

(sorry, I don't know yet how to suggest a Pull request)

I've made a very small changes in the jquery.print-preview.js file in order to be compatible with jQuery 3.1.

Original lines:

- $('img', print_frame_ref).load(function() {
   print_frame.height($('body', print_frame.contents())[0].scrollHeight);
});

Once modified :

+ $('img', print_frame_ref).on('load', function() {
   print_frame.height($('body', print_frame.contents())[0].scrollHeight);
);

The change concern the first line : don't call anymore .load(function() {...}) but use .on('load',function() {...} );

Doesn't work correct with textarea and select

When print textarea the preview does not display its content, and the select display the
default value, not what I selected.

Preview opens only once

The fancy preview overlay opens only once when i click on "print this page". When i click on the body background, the overlay will close and the "print this page" link do not trigger.

Sorry for my bad english.

Iframe cross origin error on all browsers

I am getting the following error in Chrome (and a similar one in other browsers):

Uncaught DOMException: Blocked a frame with origin "https://www.abcxxx.com" from accessing a cross-origin frame.

I tried changing X-Frame-Options in my web.config file from SAMEORIGIN to ALLOWALL, but it didn't help.

Thanks.

Error msie

this error is in chrome

This plugin doesn't work in IE 6 (maybe in IE7 also) and incorrect behaviour in IE8

This plugin doesn't work in IE 6 (maybe in IE7 also) and incorrect behaviour in IE8

plugin conflicts with addthis.com javascript

Hi,

Thanks for this plugin - it looks fantastic!

I have started to integrate this into a client website and was getting a javascript error - the plugin only seems to work if I remove the reference to addthis.com:
http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e9812af070b6bcc

Is this an issue you are aware of?

Firebug - console shows the following error.

Permission denied to access property 'name'
[Break On This Error]

if (window.frames[i].name == "print-frame") {

Thanks,
Raj

[solved] Safari 5 issue

Hello

I've got this plugin up and running just fine but it seems that Safari 5 encounters problems. After some trial and error I found the problem. It is my custom google search-bar. It needs this script: src="http://www.google.nl/jsapi" type="text/javascript"></script . If I delete the line the plugin works great but I do not have the custom search bar any more.

Any suggestions?

Regards,
Jurgen

Ps.:
This is what I use further:
script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script

landscape

Thoughts on supporting landscape preview?

The preview is not styling at all

When I click the preview link and the modal dialog/popup comes up my page looses all styling, it is as if the external stylesheets disappear, what am I doing wrong? When I click the print icon in the popup then everything styles correctly again in the browser print view.

Browser header and footer

I noticed that you have been able to hide the browser header and footer without user intervention. Can I ask how you did this?

Doesnt work for me

jQuery 1.9 and higher dependency issues

In issue #20 and #21 dependence has been discussed
I run this nice plugin with the following scripts:
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.js"></script>

The migrate script is the important factor here. Without it won't work.
Currently the highest jquery-migrate is version 3. But this version does not work for so I stick to 1.4.1.
See the plugin in action:
http://www.jurgenenkatja.nl/

Issue with IE

I have a table for the print preview which will be loaded using the plugin. But somehow, the line of the last table row is missing. I am not sure why but it only occurs in IE. Chrome and Firefox are OK. Could you please advise me on how to resolve the issue?

Here is the screenshot:

Thank you very much.

Move pagination to bottom and printed date to the top

Hi All,

Is it possible to move move page number to bottom and printed date to the top?
Thanks in advance for your response.

(solved) Not working twice with FF 16

Okay, found it.
Turned out that my jquery.min was not the correct one to use.
The script works great now.

/// Hello

I really do not know if this is the right please to ask any questions.
If not, please accept my apologise.

I found this really great plug-in and tried to implement it in my website.
The newest src works great (implemented on one of my own webpages) in Opera, Chromium, Rekonq but for some reason it does not work in FF 16.01. Strangely enough the example page works fine in FF 16.02.

When I use the jquery.print-preview.js from commit 2837fee it works in FF16.01 but I have to refresh the page to see it twice.

Here is my testpage:
http://tinyurl.com/c3hjrhe ///

Kind regards,
Jurgen

Conflict in IE9

When I tried the plugin in IE9 I discovered a conflict which I think is due to Google's custom search plug-in. If I add a meta tag to tell IE to use IE7 it works fine. But this is not really satisfying because the page renders a bit different under IE7.

I have put all the files in my test folder: http://tinyurl.com/blnlaym

I hope some of you can help me solve this awkward issue.

Kind regards,
Jurgen

Is it possible to show specific div as a Print Preview?

Is it possible to show specific div as a Print Preview instead of showing complete Page?I'm preferring dynamic div through Javascript or jQuery. Thanks.

Depends on outdated jQuery

TypeError: $.browser is undefined

http://jquery.com/upgrade-guide/1.9/#jquery-browser-removed

iframe permission error in FireFox

If the page contains an embedded iframe (e.g. the Vimeo iframe embed code below), Print Preview will fail in FireFox.

<iframe src="http://player.vimeo.com/video/9986699?byline=0&amp;portrait=0&amp;badge=0" width="500" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

The error in the FireFox console is Permission denied to access property 'name' when Print Preview tries to access window.frames[i].name (line 47 of jquery.print-preview.js).

I was able to make this more FireFox friendly in an ad hoc way by first checking the frames array. But there's probably a more elegant cross-platform solution. In the meantime:

        // The frame lives
        if (frames["print-frame"]) {
            var print_frame_ref = frames["print-frame"].document;
        } else {
            for (var i=0; i < window.frames.length; i++) {
                if (window.frames[i].name == "print-frame") {    
                    var print_frame_ref = window.frames[i].document;
                    break;
                }
            }
        }

Just FYI. Nice tool, thanks!

Printing Elements, Event Triggers & Formatting issues

Hi,

Thank you for this awesome plugin! I faced a few issues getting it to work on my page. Had to make a few changes, have included them here.

---

//Print specific elements (with class=printpreview) or the whole page
print_content = $('.printpreview').length > 0 
                ? $('.printpreview') 
                : $('body > *:not(#print-modal):not(script)'); 
//Used it here
var $iframe_body = print_content.clone();
//and here
print_content.clone().each(function() {
                    $('body', print_frame_ref).append(this.outerHTML);
                });
// Added Event triggers to allow container page to carry out actions
print_content.trigger('printPreview.loading'); //first line after print_content is assigned
print_content.trigger('printPreview.ready'); //end of loadPrintPreview
print_content.trigger('printPreview.unloading'); //first line of distroyPrintPreview
print_content.trigger('printPreview.complete'); //last line of distroyPrintPreview

// Replaced the loop by this statement as the addThis plugin in FF was throwing a permission error
// used contentWindow instead of contentDocument for older browsers
print_frame_ref = print_frame[0].contentWindow.document;

// Stored the css values of body before changing them
bodyCSS = { overflowY: $('body').css('overflowY'), height: $('body').css('height') }
$('body').css({ overflowY: 'hidden', height: '100%' });

// Restored it later - this used to mess up my page
$('body').css(bodyCSS);

// Print the iframe instead of the page
if ($(this).hasClass('print')) { print_frame[0].contentWindow.print(); }

---

Regards,

Derick

Expand functionality

Works fine as is, but would be really useful if it could be made to load an external page ready for printing, and I'm admittedly having some trouble attempting to make that adjustment ...