How to print a portion of an HTML page?

Question

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?

If anyone has an idea, please share it with me.

Answer 1

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 2

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.