How to print a portion of an HTML page?

Question

Hi friends

I have an html page i want to print a portion of this html page, I know a javascript function to print a page, onClick="javascript:window.print(); return false;

but how can i print a portion of a page.

Any one have an idea, please share it to me

Thanks

Answer 1

You can apply a CSS style to hide everything but what you want printed for media="print" using Javascript.

You can also load the page in another window or a [hidden] <iframe> and print that.

Answer 2

You should use a separate css for the print media. This allows you to hide/show portions of the page when it gets printed.

html :

<div class="dont-print-that">
   blah
</div>
print this!

include:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

print.css

.dont-print-that{display:none;}

The other solution is to open a new window with only the content you want to print. You could either do that in a popup or an iframe. Personally I find the CSS solution more elegant, but that's up to you.

Answer 3

If you want to implement multiple "Print this section" features on a page, then print media stylesheets (described in other answers) are the way forward…

… but combine that with alternative stylesheets so you can switch to one for each section.