I’m following the way to print a specific div inside html page.
JS Function
function printContent(div_id)
{
var DocumentContainer = document.getElementById(div_id);
var html = '<html><head>'+
'<link href="css/template.css" rel="stylesheet" type="text/css" />'+
'</head><body style="background:#ffffff;">'+
DocumentContainer.innerHTML+
'</body></html>';
var WindowObject = window.open("", "PrintWindow",
"width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
WindowObject.document.writeln(html);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
document.getElementById('print_link').style.display='block';
}
HTML CODE
<div id='ad_div'> <!-- we want to print only this div and here is the link --> <a href='javascript:printContent("ad_div")' id='print_link'><?php __('Print');?></a> </div>
<pre>
this work for me 🙂
thanks so much. it solved my stylesheet problem.
Simple and clear
thanks very much,you saved me a lot of times.waiting for more from you!!
Nice script! Any way to force landscape orientation of the printed page?
hmmm.. have also noticed it doesn’t work well with Chrome, launches straight to blank Print screen. Doesn’t load content in new window first
Me too getting the same problem its not working in chrome browser. Help me thanks in advance
I’ve had to remove the following lines for Chrome so it just opens the new window with print content, but this relies on user to manually push print
WindowObject.print();
WindowObject.close();
Thanks, nice script
Thanks dude. this is what i wanted.
Thank you very much:-)
Just what I was looking for. I also had the same issue with Chrome and Safari and what did the trick for me was putting onLoad=”self.print()” inside body element.
hope it helps!
I post the javascript function I used including what I mentioned above.
function printContent(div_id)
{
var DocumentContainer = document.getElementById(div_id);
var html = ”+
”+
”+
DocumentContainer.innerHTML+
”;
var WindowObject = window.open(“”, “PrintWindow”,
“width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes”);
WindowObject.document.writeln(html);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
document.getElementById(‘print_link’).style.display=’block’;
}
Thank you very much for the script, worked perfect for me.
thanks..
excellent..this work for me…
Write more, thats all I have to say. Literally, it seems as though you relied on the video to make
your point. You clearly know what youre talking about, why throw away your intelligence on just posting videos to your weblog when
you could be giving us something informative to read?
good
That’s great
it was a “echo (‘print’);” instead of ” __(‘print’);” thanks..
only thing: i’m using wordpress and also using a function to generate QR-CODE in the post/single page. however, the image of the QR-Code can’t load with this function…
this example not working, please add demo script in zip to download
this did not work for me at all. It is not taking my stylesheet. Can anyone help me with that to do to get my styles to show up in print screen
Is there any way to force it landscape through java script/stylesheet which works in IE 8 browser.