Print part of a page

  • Thread starter Thread starter Joe Kovac
  • Start date Start date
J

Joe Kovac

Hi!

I would like to create a page, where the user can print the lower part
of the page by pressing a button.
It might look like this:

-----------------------------------------------
o Setting 1 o Setting 2 Input: <TextBox>

PrintButton

+----------------+
| printable part |
+----------------+
-----------------------------------------------

The printable part shall be influenced by the settings above it. After
the user selects the settings he needs he can push the print button and
print the printable part only.

Thanks for your help

Joe
 
Important thing to understand is that browsers can print only the whole
page. You can achieve printing part of the page by hiding controls you don't
want to print or by setting their css style.

You can do it either on client or server side.

On client side you can handle onbeforeprint and onafterprint events to
hide/show parts of the printable area. You will need to write some
javascript code to check the Setting controls and to locate and hide
controls in the printable part.

You can also create a special stylesheet for printing like this:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

and manipulate with control css classes either or server or client side.

--
Eliyahu Goldin,
Software Developer
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net
 
Eliyahu said:
Important thing to understand is that browsers can print only the whole
page. You can achieve printing part of the page by hiding controls you don't
want to print or by setting their css style.

You can do it either on client or server side.

On client side you can handle onbeforeprint and onafterprint events to
hide/show parts of the printable area. You will need to write some
javascript code to check the Setting controls and to locate and hide
controls in the printable part.
Click to expand...

I didn't find any onbeforeprint and onafterprint events. Where can I
find some information on that?

I tried following:
function myPrint()
{
document.getElementById('<%= div1.ClientID %>').style.display = 'none';
window.print();
document.getElementById('<%= div1.ClientID %>').style.display = '';
}

Making the elements visible again happens too early. So the hidden part
gets displayed on the printed sheet. Any ideas how to solve that?
 
Eliyahu said:
Right, they won't wok in FF. Research the css option.
Click to expand...

Thanks. The css option works great. I just hide what shall not be
printed using a "noprint" class.
 
Back
Top