I have particular division in my web page. i want to print that div only when click "print" in my web page. i have some javascript code. But that is not well formatted.
Is there any javascript to print particular division from my web page?
Thanks in advance
- Gnaniyar Zubair
I have particular division in my web page. i want to print that div only when click "print" in my web page. i have some javascript code. But that is not well formatted.
Is there any javascript to print particular division from my web page?
Thanks in advance
- Gnaniyar Zubair
- Do you mind marking this 'Answered'? – Andy Commented Jul 22, 2009 at 18:34
5 Answers
Reset to default 9You can specify CSS stylesheets with the attribute media="print" and apply the style display: none; to all elements except those which you want printed.
For example:
print.css
* { display: none; }
div.print_block { display: block; }
page.html
<HEAD>
<LINK rel="stylesheet" type="text/css"
media="print" href="print.css" />
</HEAD>
<DIV class="print_block">
...
</DIV>
If you want to hide some divs when printing, you can set them to "display: none" in a print media section of your stylesheet, and they won't appear.
eg, in your stylesheet:
@media print {
div.header {
display: none;
}
div.printable {
page-break-inside: avoid;
page-break-after: always;
}
}
This answer is almost exactly the same as the two which beat me by 4 minutes :-) , just a note that you don't need a whole separate stylesheet if you don't want to ...
Also, the "page-break-inside: avoid;" and "page-break-after: always;" clauses are good for printing out a few divs, each on its own page.
Check this jQuery plugin jqPrint. It seems to do what you want.
I don't think there is a direct way of doing this. You can however:
- Create a special CSS for
media=printwhere all but the one div you want to print is hidden, OR - Use a hidden iframe for the content you want to print
Googling with the terms "javascript print partial page" may help you find some tutorials.
I saw smf like that in one project at my job. You have to open popup in popup you put content from parent page which you wanna to print. And it's all :)