Printing contents of a div using javascript
Guys this is a nice piece of code which has been tested in IE7 to print the contents of a div. I got this code from http://www.webdeveloper.com/forum/showthread.php?t=152798
While printing keep in mind that on the printed copy you will lose all css styles.
<script type=”text/javascript”><!–
function ClickHereToPrint(){
try{
var oIframe = document.getElementById(‘ifrmPrint’);
var oContent = document.getElementById(‘divToPrint’).innerHTML;
var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
if (oDoc.document) oDoc = oDoc.document;
oDoc.write(“<head><title>title</title>”);
oDoc.write(“</head><body onload=’this.focus(); this.print();’>”);
oDoc.write(oContent + “</body>”);
oDoc.close();
}
catch(e){
self.print();
}
}
// –></script>
<a onclick=”ClickHereToPrint();”>Print</a>
<iframe id=’ifrmPrint’ src=’#’ style=”width:0px; height:0px;”></iframe>
<div id=”divToPrint”>
content
</div>
</body>
Tags: contents, css, div, javascript, printing
To print just a div the following code works. Of course you need to replace the id of the div with your id.
function PrintContent()
{
var DocumentContainer = document.getElementById(‘divtoprint’);
var WindowObject = window.open(”, “PrintWindow”,
“width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes”);
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
this one works.. thank you
its working. Thanks Msdnexpert
I used Msdnexpert’s code and it works perfectly! I’ve been trying to get this to work for weeks now on and off. Thanks a Million!
Also I should note that I’m using inside Drupal… another reason why there were roadblocks…
Thank!
But, your resolve only deal with label (if i make label change). However with radio or checkbox that status of check is inputted by user or javascript prints unsuccessfully.
I’m using firefox and see that. But IE may be correct. I don’t know the options in firefox and when see on firebug, i see the text (innerHtml) for label inserted in source but check for radio can’t be inserted.
Hello,
I find this very helpful, but I have 1 problem.
I would like to keep my css styling in the printed form.
The styling is removed when printing.
Is there a way to keep it?
Thank you,
Dana
Assalam-u-Alaikum,
I find this very helpful,
thanks buddy
<!–
function ClickHereToPrint(){
try{
var oIframe = document.getElementById(‘ifrmPrint’);
var oContent = document.getElementById(‘divToPrint’).innerHTML;
var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
if (oDoc.document) oDoc = oDoc.document;
oDoc.write(“titleâ€);
oDoc.write(“â€);
oDoc.write(oContent + “â€);
oDoc.close();
}
catch(e){
self.print();
}
}
// –>
It doesn’t work on me. huhuh =(
Hello!
I’d been trying to print the div content with no luck.
i can’t even capture the innertext nor innerhtml with code (i’m working with asp.net).
In fact what i want to print are the directions produced by google maps for a given route.
The code kindly posted by msdnExpert breakes here:
WindowObject.document.writeln(DocumentContainer.innerHTML);
The Err Message is:
Microsoft JScript runtime error: Object required
For any help
Thanks a lot.
try giving EnableEventValidation=”false” in page directive
It Works Fine in My Website
to keep the css styles link your css file:
“”
before close the header:
oDoc.write(“â€);
Example:
oDoc.write(“titleâ€);
oDoc.write(“â€);
oDoc.write(“â€);
oDoc.write(oContent + “â€);
Thanks for this wonderful solution
thanks.
it work out for me.