Print part of a page

[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

 

[Eliyahu Goldin]

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

 

[Joe Kovac]

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.

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 Goldin]

Putting the code for making visible in onafterprint will solve your problem.

http://msdn2.microsoft.com/en-us/library/ms536788.aspx
http://msdn2.microsoft.com/en-us/library/ms536906.aspx

--
Eliyahu Goldin,
Software Developer
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net

 

[Joe Kovac]

Thanks. But how about FF?

 

[Eliyahu Goldin]

Right, they won't wok in FF. Research the css option.

--
Eliyahu Goldin,
Software Developer
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net

 

[Joe Kovac]

Right, they won't wok in FF. Research the css option.

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