Ask Ben: Print Part Of A Web Page With jQuery

Posted May 21, 2009 at 9:10 PM by Ben Nadel

Tags: Javascript / DHTML, Ask Ben

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.

it worked for me. greetings @Ben :)

It is a very nice plug-in but it doesn't work in Opera (any versions lower than 10.10). Is there a solution for Opera? thanks :)

@raloocka Todd Rafferty mentioned jqPrint in a comment earlier, which is supposed to work in Opera. http://plugins.jquery.com/project/jqPrint

Thanks for the script. This really helped me out.
can you put PDF support as well.

@Harpreet,

For PDF support, you'd need a server-side language like ColdFusion that was capable of generating PDF... then you'd have to submit to it as well.

@Ben Nadel, okay thanks dear...

Hey Ben, first off, awesome, well thought out code. I'm using a variant of this method to print the results of a survey from a banner ad. Basically all the same concepts are used, just instead of being selected from the parent window, the html content is generated from flash input, and then injected into the iframe.

The only issue I've seen is in IE7, and IE8, the page prints out scaled down to a smaller size--approximately half the size in fact. This seems to be dependent only on the positioning of the banner itself. Meaning that when the banner's in some places it prints fine, but is scalled down when the banner is in other places. I'm wondering if you have any idea if the placement of content on the page in IE7/8 could affect the print-rendered size of the iframe in some cases. That's the only conclusion I can draw since it's the same code everywhere. I'd love to hear thoughts from the code author's perspective.

I actually found a solution that seems to work. For some reason in IE, when you use the document.execCommand function it actually renders the print-page normally with out using any of the auto scaling to fit. It has to be inside a try block because the call throws an error in Firefox. So if it catches an error, or the command doesn't get executed, it prints by the normal means. If you're wondering, I used "exec!=true" because MS spec said it returns true if it executes, but no mention on when it doesn't execute. Not to mention that the code block will sometimes catch an error. Good luck!

objFrame.focus();
try {
var exec = objDoc.execCommand('print',false,null);
}
catch(err)
{
//catch nothing
}
if(exec!=true)
{
objFrame.print();
}

@Douglas,

I have very little experience with Flash. I like the execCommand() approach; I had never even thought of that - it's been a long time since I even used that command to create bookmarks :)

Thank You

Hi

Its an awesome code. Wow it worked great.

But I have something more to do, when I am giving a print the length of the controls got changed, I have tables in my code, these tables are having controls like text, textarea when I give a print the text area which I was seeing on the web Page is different from the one which I took print. The difference is the text area size, if some way if I can change the element attributes before printing that would be great, is there any way I can do this.

2) I have a list box with 20 values and size of the listbox is 5, when I give a print its displaying me only 5 values but is there a way where I can increase the size to 20 and print but at the same time my page should have only 5 values displayed

Thank You for your code

@Malla,

I am not sure how well forms print. If you really need things to change in nature (such as a list box), you might want to consider just creating a print-version of the page.

Thank You for your reply, yeah I need to look into that like creating a new page for printing, I can also modify this.html by assigning to var and change the contents of the var, I will take a look into this later. Can I use selectors on var I mean some thing below var x this.html().Can I use jquery selectors on x now.

I am new to JQuery.

Once again Thank you

@Malla,

Once you have your jQuery object, you can definitely access the html using the .html() method. You can also use things like .find() and .filter() to gather parts of that collection.

HI Ben,

Wonderful script. I just have one issue. There are a menu links on the same page where i have my print link. All the other links are becoming as print option. How I can avoid this problem. I want the menu to work as it is and the print option to do what you have done in your script.

Thank you in advance.

Excellent module!

FYI, you have some bugs in your HTML markup. You can't put the head tag within the body tag.

Also, writing is fairly slow in general so you could optimize your html by creating a string first and writing once instead of multiple writes.

Here's fixed markup that I have used includes some other optimizations for propagating the body css classes and for including non-inline css:

var printContents = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">" +
"<html>" +
"<head><title>" + document.title + "</title>" +
jStyleDiv.html() +
"</head>" +
bodyStartTag +
this.html() +
"</body></html>";

objDoc.write(printContents);

@Jaxley,

Oh wow, good point! I can't believe I inverted those. Excellent catch.

I've been using this piece of code for awhile, to print a page, and all of the sudden it (and many other jQuery plugins) just stopped working. Now when I try to run the code:

it returns '$("#printableContent").print is not a function'... Any ideas? I've search around and can't seem to find any other records of this happening. But, it's happened to three of the plugins I use, so far...

Thanks for any assist...

--Charles...

Okay, after playing around I found a solution...

Not sure why it works but I changed:

to this:

An now it works fine again... Anyone have any thoughts on why that changed? Maybe it can help anyone else who stumbles on this issue...

Thanks..
--Charles...

@Charles,

Very weird! It looks like the context of the execution is being manipulated... maybe? I don't really have any insight on that one.

Hi everyone,

Running into problems with jqprint, I am considering switching to your snippet.

Does anyone have a revised version of the snippet that includes all the fixes from jaxley and others ?

Thanks in advance,

Jonathan

P.S. Thanks for your blog Ben

Hi Ben,

Great work you been doing! I've learned a lot with your great articles.

I noticed a weird issue, don't know why and when, but suddenly the plugin stop working in chrome, I recently updated it to the latest version but i don't know if it has anything to do.... the true is that with FF works just fine and in chrome used to work and now ...pufff!

Any ideas what might happen? Anyone reported you some similiar issue?

Thanks a lot for you time.

Greetings from Portugal.

Tiago Teixeira

@John,

You might run into problems with the new stylesheet not having time to load. You might look into using a "media query" to get an existing stylesheet to provide print-time styles.

@Tiago,

I don't know sorry. Take a look through the comments - I believe that some people have provided links to more robust jQuery plugins that do this same kind of stuff. I haven't really maintained this at all.

where the src of jquery-1.3.2.js ??

where the src jquery-1.3.2.js ??

You can google.load the code... Here's a link to the info:

http://code.google.com/apis/libraries/devguide.html#jquery

Hey Ben,

Thank You very much.., it is being very useful for the beginners like me..

suresh

Nice solution that worked for me very well. Thanks!

Dear all,
I'm trying to update the html of the printable div by the result of an ajax request. But when i'm trying to print it the print function goes in error ($("#printtable1").print is not a function). So anybody have a solution of this.

Thanks! That worked really well...

Thank you very much! Just what i need!

Thx for this code ;)

Just a problem with Twetter's Widget.
It steal not working on IE 7 - 8
Well, I've taken an other way to solve the problem.

just got this running, tested on IE 9 & Google Chrome. thanks Ben!

Hi Ben!

Nice solution you got here. I actually created a widget for Yii framework so they can print whatever they want to be printed in their page, which can be downloaded at http://www.yiiframework.com/extension/mprint/, and I used your js.

I have enhanced your code (I hope you won't get mad) to make it more fitting to users, and included the insights contributed by jaxley and douglas.

I so have many TODOs for your code, like adding a debug feature. Many thanks to you man. :)

BTW, as of the moment I have it licensed under GNU Lesser GPL. I want to know your opinion, since you are the main man behind my widget. :)

In IE 8 i cant reference the DOM (var objDoc = objFrame.document;)

doesn´t anybody has that problem. It just say "document is null or not an
object". ????

Thanks a ton!

Hy ben, nice plugin..

btw, i'm having a problem because the page that i'd like to print is added dynamically using javascript. is there any way to work around this? thanks a bunch in advance.

How do we remove the url link at top right corner from the print page...... any idea
or code snippet or is it possible at all....

btw cool plugin...pretty handy.

Thank you very much for this tutorial..
:)

Very useful plugin!

I've seen here someone had problems with printing forms.

The problem is that the plugin prints the default values of the input fields not the values at the moment of printing.

A solution to this could be storing the default values in a array, replace the default values with the current values and then write the data using that object. After the data has been written and printed we will replace back the default values with the values stored in that array.

This code could go inside the print function:

Just want to say thank you for sharing this simple but effective piece :)

Ben, once again, you've saved my bacon! Thanks! :)

does this work inside a window.open function in javascript??? because i tried it in it and it doesn't print

Ben, this is the first plugin I've found that prints the entire contents of a jquery dialog!
This is the only code I needed:
dialogButtons.Print = function(){
$( ".registration-terms-container" ).print();
return( false );
};

Thanks!

Hi Ben,
I have tried using your JQuery print plugin in order to print only a div content list on my page.
Added a printable style sheet to your code because it was missing.
It works well in IE6 an Firefox in winXP but not in IE8 under Win7. IE8 prints the actual page instead of just the "printable" class content. As if it ignores the newly created printable iframe and only prints what is on the actual page. No errors just prints the page instead of the designated printable content.
I haven't tested it in IE7 but it is possible that will share the same issue.
Is there any idea or solution which would make this print plugin code work in IE8 and/or IE7? Ideally this print functionality would need to work in every major browser.
Thanks, Attila

We have some restrictions on implementing new plug-ins on our corporate website, so I came up with a different approach - hide the body and only show the content to print, print, then show all content again. attach this to the print button:

function printdiv(){
bodyHtml=$('body').html();
printHtml=$('#report_content').html();
$('body').html(printHtml);
window.print();
$('body').html(bodyHtml);
}

(div "report-content" is the div we want to print).

Hi guys,

I was very interested in the potential of the jqPrint plug-in library that Todd shared, however, my current work environment limits us to the Prototype JS framework. Has anybody come across a similar library to jqPrint but utilizing Prototype instead.

Thanks!

Rick

simple and effective plugin thanks so much.

One thing though... The area I am printing is a deposit form that has very specific formatting requirements. How can set the <hr> tag and the "print" link not to print?

Hi Ben!

First of all, congratulations Dude! U rule!

Just one question Ben, is that possible to set up the edges of the page using JS? I'm trying to use @page by Css, but it seems that just on browsers that support webkit.

Any ideas?

Tks!

I was experiencing what @Charles and @Nebras were complaining about, namely, the "Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function" error, when I realized that I needed to wrap the jQuery script accordingly, as per http://docs.jquery.com/Using_jQuery_with_Other_Libraries For example, changing:

to

and closing with

and now the script works great. Thanks!

You saved my arse.

Thank you!!!

Hey Ben,

First of all, great code there!
However, I had a some issue with your code in IE7, since it kept printing the parent document instead of iframe. the cause of it was that the content of iframe were not loaded at the print command was executed, which made IE think iframe is empty and that it should switch to printing the parent document. This is the change I did to make it work, and it works now for IE7

instead of

objFrame.focus();
objFrame.print();

i used

jQuery("[name="+strFrameName+"]").load(
function() {
window.frames[strFrameName].focus();
window.frames[strFrameName].print();
}
);

Aleks,

COuld you please share your complete code, I am a beginner and was having hard time implementing Ben's code.

@Snagy, I copied the code from the post, and added the repalced part of the code.
http://jsfiddle.net/NgnA9/2/
Hope this link is visible.

@Snagy, or this version:
https://sites.google.com/site/renestocodeplayground/files

Hi guys,

I have got my printable section printing out now, but my external style sheets are being completely ignored.

When I click print, and look at the iframe in Firebug, the css files are being brought in correctly, but the styles themselves are not being applied to any of the classes in the body of the iframe, so I get a completely downscale print out with no imagery (alot of the images are coming from background: styles)

Has anybody had this problem before? Any ideas?

Thanks!

@Chris, this inheritance of the styling used within this text didnt really worked some wonders for me, so I used specific css just for this case, called, *-printer-friendly.css
Take care to write them in the that new iframe generated for printing, and not the printable div, as they are not the same things.

@Aleks - Thanks for your response. Are you actually including an external style sheet, or are you writing your styles within the page that you are printing?

I am using Martin Madler's suggestion of importing the css using something like this in the jQuery print plugin:

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

As I say, it is locating the style sheet - I can see the file upon inspection, however none of the classes in the iFrame have got the styles from the style sheet.

For example, my print.css has the following:

However <div class="red">Hello</div> is coming out black as though it has no style assigned to it.

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:	Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>
	Remember my information
	Subscribe to comments
	Send me a copy of this comment