print div content – Print only the content of an HTML element and not the whole document
JavaScript Add commentsThis snippet will print the contents of any html element and not the entire page.
Get the contents of the innerhtml of the element. Here it is a div. We are going to print the contents of a div.
Define an iframe (better before this script).
This iframe is hidden on the screen by giving the style so and so.
Get a reference to the iframe’s contentwindow so that you can write the contents of the div in to the body of the iframe.
Use the close command like in the script else you can see that the browser is still loading the page even if you have completely written all the text into the content window.
So when you do close call you specify that there is no more contents to write to.
And then we make the iframe as the active window because when you print the active windows total body content will gets printed.
and then we call the print command. voila.
Without any modification this code snippet works well for me so hope it would be the same case for you guys.
The JavaScript code
var content = document.getElementById("divcontents"); var pri = document.getElementById("ifmcontentstoprint").contentWindow; pri.document.open(); pri.document.write(content.innerHTML); pri.document.close(); pri.focus(); pri.print(); |
The HTML Code
<iframe id="ifmcontentstoprint" style="height: 0px; width: 0px; position: absolute"></iframe> |
Why the need of an iframe?
as you all know when you print the whole document gets printed.
So we create a hidden new document with the help of an iframe and we assign the contents we want to print to the body of the iframe.
So the iframe will contain only the contents which we want to print.
And since the iframe is hidden everything will appear normal at the same the work is done.
December 8th, 2011 at 1:20 am
I’ve been looking for this answer… thanks. One question. Where do we put the script? is it in the head area or in the button that prints? and can you create the print button in the div you are printing?
March 6th, 2012 at 9:44 pm
Thanks for sharing your knowledge, it has been very useful for me.
The problem i found now is that the css that are called at the head are not included so the printing does not show the styling.
Thanks again.
November 27th, 2012 at 5:42 pm
Thanks Jayapal, was searching all over for this. None of the code gave me the perfect result as ur code gave. Thanks a lot 🙂
December 1st, 2012 at 2:16 pm
I have a background image in a div and its not printing it.
How can we fix this?
December 3rd, 2012 at 11:47 am
@Barbio
http://stackoverflow.com/questions/596876/how-can-i-print-background-images-in-ff-or-ie
Refer this link. I haven’t experimented it.
April 24th, 2013 at 6:28 pm
Works like a charm. But you should reset the focus to the main window after print() has been called. Otherwise Ctrl+F5 will reload the iframe and not the page.
August 27th, 2013 at 10:48 am
I am having a jsp form,but the input values are not getting printed