How do I print the indicated div (without manually disabling all other content on the page)?
I want to avoid a new preview dialog, so crating a new window with this content is not useful...
The page contains a couple of tables, one of them contains the div I want to print - the table is styled with visual styles for the web, that should not be shown in print....
Could you use a print stylesheet, and use CSS to arrange the content you wanted printed? Read this article for more pointers.
hm ... use the type of a stylsheet for printing ... eg:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
print.css:
div { display: none; }
#yourdiv { display: block; }
Use a special Stylesheet for printing
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
and then add a class i.e. "noprint" to every tag which's content you don't want to print.
In the CSS use
.noprint {
display: none;
}
You could use a separate CSS style which disables every other content except the one with the id "printarea".
See CSS Design: Going to Print for further explanation and examples.
With CSS 3 you could use the following:
body *:not(#printarea) {
display: none;
}
All the answers so far are pretty flawed - they either involve adding class="noprint" to everything or will mess up display within #printable.
I think the best solution would be to create a wrapper around the non-printable stuff:
<head>
<style type="text/css">
#printable { display: none; }
@media print
{
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version
</div>
</body>
Of course this is not perfect as it involves moving things around in your HTML a bit...
I picked up the content using JavaScript and created a window that I could print in stead...
Give whatever element u wanna print this id "printMe".
Include this script in your head tag:
<script language="javascript">
var gAutoPrint = true;
function processPrint(){
if (document.getElementById != null){
var html = '<HTML>\n<HEAD>\n';
if (document.getElementsByTagName != null){
var headTags = document.getElementsByTagName("head");
if (headTags.length > 0) html += headTags[0].innerHTML;
}
html += '\n</HE' + 'AD>\n<BODY>\n';
var printReadyElem = document.getElementById("printMe");
if (printReadyElem != null) html += printReadyElem.innerHTML;
else{
alert("Error, no contents.");
return;
}
html += '\n</BO' + 'DY>\n</HT' + 'ML>';
var printWin = window.open("","processPrint");
printWin.document.open();
printWin.document.write(html);
printWin.document.close();
if (gAutoPrint) printWin.print();
} else alert("Browser not supported.");
}
</script>
Call the function
<a href="javascript:void(processPrint());">Print</a>
Sandro's method works great.
I tweaked it to allow for allowing multiple printMe links, particularily to be used in tabbed pages and expanding text.
function processPrint(printMe){ <-- calling for a variable here
var printReadyElem = document.getElementById(printMe); <-- removed the quotes around printMe to ask for a variable
<a href="javascript:void(processPrint('divID'));">Print</a> <-- passing the div ID to be printed on to the function to turn the printMe variable into the div ID. single quotes are needed
With jQuery it's as simple as this:
w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
This works well:
<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>
Note that this only works with "visibility". "display" won't do it. Tested in FF3.
Here is a general solution, using CSS only, which I have verified to work.
@media print {
body * {
visibility:hidden;
}
#section_to_print, #section_to_print * {
visibility:visible;
}
#section_to_print {
position:absolute;
left:0;
top:0;
}
}
Alternative approaches aren't so good. Using display is tricky because if any element has display:none then none of its descendants will display either. To use it, you have to change the structure of you page.
Using visibility works better since you can turn on visibility for descendants. The invisible elements still affect the layout though, so I move the section_to_print to the top left so it prints properly.
HI!
great script Sandro.
But I have a doubt. How can i print a header with a image and a footer in every page printed?
TKS (Obrigado) Ocean
Hi good code I have used in my project but it is opening in new window. I dont want to open in new window i.e wheneve we click it should show directly print option.
Thanks, Ganesh