Ask Ben: Print Part Of A Web Page With jQuery

Posted May 21, 2009 at 9:10 PM

Tags: Javascript / DHTML, Ask Ben

Ben, great new look!! Quick question, I am implementing a jQuery modal pop-up in my app and I want the users to be able to print only the content of that modal window. Any idea? Thanks!

To be honest, I've never done this before, so I am not sure if the following solution is truly cross browser compliant. The jQuery plugin that I authored below was tested to be working in FireFox, IE 7, Safari, and the latest version of Chrome Beta (although Chrome seemed to have some issues with the images from time to time). Before we get into how it works, take a look at this demo video so you can see what I'm talking about:

As you can see, I created a jQuery plugin to handle the print() functionality. This way, we can make anything on the page printable using a jQuery selector. The caveat being that the containing element is not printed - only it's child elements get added to the print document. In the following page, when the DOM is ready, we find our link element and have it print (upon click) any element on the page with the class "printable:"

 Launch code in new window » Download code as text file »

And, here is the jQuery plugin, print(), that powers this solution:

 Launch code in new window » Download code as text file »

The plugin itself is not too complicated - we are creating an IFrame on the fly, writing the target HTML to its body, and then printing it. It's a simple concept, but there were some issues getting it to work in Internet Explorer (IE). The following caveats tripped me up at first:

• In IE, you have to focus() the IFrame before you print it other wise the top page prints.
• In IE, I kept getting errors when trying to use jQuery to write the STYLE tags to the IFrame head. As such, I had to write the html() of the STYLE tags as I was writing out the document. The Style tags are crucial to in the document because they will determine the look and feel of the printed content.

Once I got those two issues out of the way, the rest worked pretty smoothly. I am not sure if this is the best technique, but hopefully it will point you in the right direction.

Download Code Snippet ZIP File

Post Comment  |  Ask Ben  |  Other Searches  |  Print Page

• Add To Del.icio.us
• Add To Digg
• Add to Spurl.net
• Add to Wists
• Add to Simpy
• Add to Newsvine
• Add to BlinkList
• Add to Furl
• Add to reddit
• Add to FARK
• Add to BlogMarks
• Add to Yahoo! My Web
• Add to smarking
• Add to Ma.gnolia
• Add to Segnalo

Reader Comments

Ben, do you need the timeout before removing the frame? I did some checking with Safari and FF and found that the code beyond the print() call on the frame does not execute until the user finishes with the print dialog. Haven't had a chance to try this on IE, it's late and I don't feel like starting up my Windows VM :)

That's very clever and makes things so much easier from a developer's perspective.

I used to craft a print.css which makes use of the html media type print and hides all GUI elements on the page among with some other markup changes. It does not work flawlessly with all browsers, though.

I just use jqPrint:
http://plugins.jquery.com/project/jqPrint

@Todd,

That plugin looks good. Looking at their code, it is a better solution. I totally forgot about pulling over LINK tags :)

@Ryan,

I just assumed that you would need a timeout. I didn't actually test to see if it was necessary.

I'm sorry, I linked to the wrong plugin that I use. I use this one atm:
http://plugins.jquery.com/project/jPrintArea

Unfortunately, it looks to have been abandoned by the author.

@Todd,

Looks to be basically the same. I think they said that the first one you posted was actually an update to the second one you posted. But I could be making that up.

@Ben: Different authors, but improved upon. Yes, you're correct.

@Todd,

Looking at the code, I saw "contentWindow". I've never seen that before. Looks really useful - thanks for helping me learn some cool stuff :)

@Todd,

Thanks again man:

http://www.bennadel.com/blog/1592-Getting-IFRAME-Window-And-Then-Document-References-With-contentWindow.htm

Dude you just saved me a ton of time! Very nice plugin!

Thanks

@Trung,

No problem my man!

Very cool work on this plugin. Just what I needed. But, is there any way to make this work with an input button instead of a text link?

I know this isn't related to jQuery but why not just have the printable version load in a coldfusion created PDF? It would eliminate all that code. Just saying...

@Jody,

It wouldn't really eliminate code as you would have to create a new CFM page for generating the PDF. This page would also have to know how to trim down the requested HTML to just the target section. I think going to a PDF would actually increase the code you would need.

@Vernon,

You just need to bind the click event to the button rather than the link.

I can't believe how easy it is to implement.

Thank you so much, you saved me time.

dont undesrstend why but when i`m printing in FF - it prints on two pages and when i`m printing in IE7 it printing all except my conent http://v8.dxloo.com/vehicle/2004/VOLKSWAGEN/PASSAT/GLS/WAGON/WVWVD63B14E220600/FOR-SALE-IN/FORKED_RIVER/NJ/200012184/

I am... kind of a Mr. Magoo type web designer...

I have a pretty simple question:
In the .printable style, do I have to include any attributes? Does this style HAVE to put in a dotted line or anything at all?

My design is all set up with borders, etc already.

I wonder if I can just enclose my existing divs (the ones I want to include in the print area) in the .printable div, which I do not want to add any formatting to the doc.

Is this clear?
thanks!
finn

@Finnerty,

The dotted line I added for the demo. You don't need it. Really, just the "printable" class should be enough for the jQuery script to hook into.

OK! :-)
on my way to the code, to try it all out. Thank you amigo!!
I'll let you know...

(...looks to his right and clucks... "Oh that Waldo... always worrying!")

fin

well... it almost works... I saved "snippet_2.txt" as "jquery.print.js" on my server.

I changed the links to both that and the jquery-1.3.2.js file in the head of my doc, and pasted your Head section parts into my Head, including the "initialize print link" stuff.

I put the .printable style into my CSS, changing the border to "none."

I put the div class="printable" tags enclosing what I want to print.

I enclosed a the words "print this page" between the a and /a tags.

OK!

The link does show the "javascript:void (0) that it should (as per the code in the Head) but.. no print.

I'm thinking I am not hooking up to your script correctly in my Head section, or at least, something is not making the connection to the script to do the work.

That's how it goes over here, if you have the time or inclination, maybe the problem is something really obvious, and I just need a nudge... thanks!!

OH YEAH!
You MADE MY WEEK!

I stripped out the <!-- comment at the top of "snippet_2 - jquery.print.js" and...
NICE!!!!!

Thank you amigo!!!
finn :-) :-) :-)

UH OH.
Now ALL the links on my page want to do the print thing. That has to be as a result of the function "$( "a" )" I assume.

What can I change that to? Can I add an ID or something to both the function and the tag used to call it?

so close...
finn

change $("a") to $(".printme a") and add class="printme" to all <a> elemnts which are supposed to initiate the printing routine. (you can have multiple classes assigned to one html element)

OK... done... the links on the page go where they are meant to go again.

But now the print link does not work. It isn't communicating the class attribute I guess...

Not sure what's up, unless the fact that the link is also enclosed in a span class... but that doesn't seem like a problem to me...

< span class="archiveLink" >< a class="printme" >print this page< /a >< /span >

I tried switching the $(".printme a") to $("a .printme")but that was a no-go...

I added the .printme class to my stylesheet, with no attributes... nada...

so... I am just bumbling around...
finn

Sorry for confusing you. That was my fault.
You can fix it by moving the class attribute printme to the outer span element.
Like this:
< span class="archiveLink" class="printme" >< a >print this page< /a >< /span >

together with this selector:
$(".printme a")

Or you can use $("a.printme") (you nearly got it right!) and have the printme class assigned to the a-element instead.

sorry Ben for flooding your blog comments ;)

Happy Happy Joy Joy!!!!

I had to make one little adjustment...

I didn't tell you EVERYTHING...

here's what works:

< div id="archiveLinkDiv" class="printme" >
< span class="archiveLink" >< a >print this page< /a >< /span >    |
< /div >

I had the span enclosed in a div... so the "printme" hook is working off of that..

I TOLD you I was a Mr. Magoo!

You are generous and very kind. Thankyou VERY much!
finn

@Finnerty,

Glad you got it working - yeah, you have to tell the jQuery selector exactly what link to hook up otherwise, it might hook up all of them!

@Martin,

Thanks for jumping in there to help out!

Hi,
is it intended to omit
objDoc.write( "<body>" );

Either way, my original page uses <link> tags to it's stylesheet. You know how to get them?

/HW

@Henrik,

It should be writing the opening body tag in the above example. I'm not sure why that part is not working for you.

As for LINK tags, those should work the same as with the Style tags. You can probably just swap "style" for "link" in the example.

Nice plugin it help a lot... thnx....

Do you have some code on how to change the page setup... like changing portrait to landscape?

@Eljoe,

I do not know of any way to do that, sorry.

thanks for the plugin :)

Everything is working great, except, how do I get rid of the URL printed at the top of the page?

thanks

@Jeff,

I am not sure there is any way to do that, at least not that I know of; that is a function of the browser's printing mechanism itself.

Hi,

Do you know of any way I can hide an image from the printed page, without removing it from the underlying page? I've currently got the following which prints without the image, but (obviously) the image flickers when the print dialogue is displayed:

$( "#LeftContent h1 img").css('display', 'none');
$( "#LeftContent" ).print();
$( "#LeftContent h1 img").css('display', 'block');

@Darren you can do this via css. search for css media types.

it goes something like this:

@media print {
/* style sheet for print goes here
it only applies to the printed page*/
}

Hi Martin,

I do have a print.css file however I don't believe it's referenced when using the print link. If I use File > Print, it prints as intended, using the css file, but not using the javascript link. Is there something glaring that I'm missing?

Thank you for your reply,

Kind regards,

Darren.

Hi Darren, does your "temp document DIV" include the print.css, too? It's used for styling the iframe.

# objDoc.open();
# objDoc.write( "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">" );
# objDoc.write( "<html>" );
# objDoc.write( "<body>" );
# objDoc.write( "<head>" );
# objDoc.write( "<title>" );
# objDoc.write( document.title );
# objDoc.write( "</title>" );
# objDoc.write( jStyleDiv.html() );
# objDoc.write( "</head>" );
# objDoc.write( this.html() );
# objDoc.write( "</body>" );
# objDoc.write( "</html>" );
# objDoc.close();

Hi Martin,

Nope, I wasn't referencing the print css file at all... Turns out I was indeed missing something glaringly obvious!

Thank you very much for your help.

Kind regards,

Darren.

@Martin, @Darren,

Print style sheets are one of those awesome things that I keep forgetting to take any advantage of when I build stuff.

Still can't get it to reference the css file, even though it's now included in the temp div (I've tried absolute, and relative links, different locations in the head for the link, and single then no quotes around the attributes...:

objDoc.open();
objDoc.write( "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">" );
objDoc.write( "<html>" );
objDoc.write( "<body>" );
objDoc.write( "<head>" );
objDoc.write( "<title>" );
objDoc.write( document.title );
objDoc.write( "</title>" );
objDoc.write( jStyleDiv.html() );
objDoc.write( "<link rel=stylesheet href=/css/print.css type=text/css media=print />" );
objDoc.write( "</head>" );
objDoc.write( this.html() );
objDoc.write( "</body>" );
objDoc.write( "</html>" );
objDoc.close();

Any ideas?

Kind regards,

Darren.

Hi Darren, it looks like you're missing the double quotes.

I think this should work:

objDoc.write( "<link rel=\"stylesheet\" href=\"/css/print.css\" type=\"text/css\" media=\"print\" />" );

Hi Martin,

Nope, that's not doing it for me either! I got around the image problem by using...

objDoc.write( "<style type=\"text/css\"> img {display:none;}</style> ");

...but haven't been able to reference the css file correctly. Thanks again for all your help though!

Kind regards,

Darren.

Hi Darren, nice to read you made it. I've never used the referencing feature myself.
This would be an option as well:
objDoc.write( "<style type=\"text/css\"> @import url(\"./css/print.css\") </style>");

Best Regards
-Martin

Nice work. Greets.

Cool plugin BUT I'd like to print a dialog that contains a flot graph. The graph is created in a canvas element. Any hints how to print that?
thanks..Sandy

@Sandy,

Sorry, I have not dealt with canvas elements yet. I assume you are saying they don't print nicely?

Hey Ben,

Were you able to ever get this working in IE6? Strangely, you have to click the Print link and then refresh the page to get it to bring up the print dialogue.

Thanks,
Andy

I have run across this issue as well. My solution was to tag my header, footer, etc with a no print id like => id="noPrint1", id="noPrint2", etc... Then I use javascript to hide the unwanted elements.

function printCommand() {
document.getElementById("noPrint1").style.display = "none";
document.getElementById("noPrint2").style.display = "none";
document.getElementById("noPrint3").style.display = "none";
document.getElementById("noPrint4").style.display = "none";
document.getElementById("printButton").style.display = "none"
}

Print button is as follows (I'm using an alert after print is done):
<input id="printButton" type="button" value=" PRINT "onclick="printCommand();window.print();setTimeout('alert(\'Finished\')',100); return window.location.reload()" />

The reload function is to retain my GET Vars at the time of printing.

This is just a different approach to solving this issue. It's a simple subtraction method. This may not be exactly what some of you are looking for in it's functionality but the result has worked for me.

Kind Regards,
Tony

im trying to print a page. it only prints a box and it says plug in content. do you know what i can do?

@Andy,

I am not sure I ever tested this in IE6.

@Tony,

If you used something like jQuery, you could make that even easier by giving them all a common class name, like "non-printable". Then simply hide/show based on class:

$( ".non-printable" ).hide();

@l,

I have never seen that, sorry.

Hi,
this plugin seem to work very differently (in my case its a failure) when the page which i want to print has the following scrollable area.

div style="overflow-y: scroll; overflow-x: auto; height: 50%; width: 90%" id="masterView"

My page has a huge section of information which is listed within a small scrollable section. Once i included the necessary plugin & css, this small section eventhough it's coded for only 50% of the screen, it gets expanded to 100% of height. This completely ruins the UI :-(

Do you have any clues ?

@Senthil,

I don't have any really good advice on that. I am not sure how you can print an area that has hidden content?

Thank you very much! We needed exactly this! JQuery works like a charm! I will post the link of the finish work you for you to see it! Thanks!

@Daniel,

Great - looking forward to it.

Post Comment  |  Ask Ben

Post A Comment

Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:	Formatting: <strong>bold</strong> <em>italic<em>
	Remember my information
	Subscribe to entry *
	Send me a copy of this comment (as part of the comment thread)

 

* If you subscribe, any new posts to this thread will be sent to your email address.