Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to print only parts of a page?

I am trying to hide some divs before the user prints this giant form, then display the divs again afterward. Thus I want to ignore the rest of the page, and only print the form itself.

Sure I could open a separate page when the user clicks the print button. The only thing is that the form is really long and it would be quite tedious to do that.


Edit: My previous question did not actually reflect what I was looking for. So I changed it to the current one.

Also thanks to all that suggested window.onbeforeprint and window.onafterprint. That was relevant to my edited question.

like image 345
Marcel Avatar asked Oct 22 '08 00:10

Marcel


1 Answers

First, The Ok Way:

Take a look at window.onbeforeprint and window.onafterprint (the original question asked about how to do it programmatically I believe).

Now, the Better Way:

A better way to do this is with a style that is specifically for printing. In other words, your div might look like this:

<div class="someClass noPrint">My Info</div>

You would then have this in your stylesheet:

.someClass {font-family:arial;}
@media print {
    .noPrint { display: none; }
} 

Another Option

You could also put this in a separate stylesheet if you wanted so you don't have to mix styles:

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

Your screen stylesheet could have ".someClass" defined one way and then your print stylesheet could have it defined a completely different way.

like image 68
Micky McQuade Avatar answered Sep 17 '22 07:09

Micky McQuade