How to print only parts of a page?

Question

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.

Regarding your edit: does my answer not answer your question? I think the best way is add a style to your divs and then use @media in your style sheet or a link to print stylesheet. — Micky McQuade, Oct 22 '08 at 00:51
Does this answer your question? [How do I hide an element when printing a web page?](https://stackoverflow.com/questions/355313/how-do-i-hide-an-element-when-printing-a-web-page) — Damjan Pavlica, Oct 23 '20 at 14:49

Micky McQuade · Answer 1 · 2008-10-28T18:52:04.143

28

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.

edited Oct 28 '08 at 18:52

answered Oct 22 '08 at 00:42

Micky McQuade

1,873
1
16
21

3

This is the way we do it at my company. It works very well and we don't have to muck with JavaScript. – Zack The Human Oct 22 '08 at 00:47
1

Yeah, we set noPrint on all our header and footer sections as well as any menus that shouldn't print. – Micky McQuade Oct 22 '08 at 00:48
1

I prefer to create a separate stylesheet that handles all print-related style changes rather than add them to existing stylesheets. – tvanfosson Oct 22 '08 at 00:50

score 17 · Accepted Answer · edited May 23 '17 at 11:48

17

IE supports onbeforeprint and onafterprint, but what you really want is a print stylesheet.

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

How to print only parts of a page?

4 Answers4

First, The Ok Way:

Now, the Better Way:

Another Option

Linked