How do I print a page using javascript and hide headers?

Question

I have a page on my website called printUsers.html.
On it there is a button which prints the page using 'javascript:window.print()'.
I am also using '@media print' on the page to hide some buttons when the page is printed.
This is all working well and I have no problems here.

The problem is the following:
All the pages on the site, extend from the main page. So at the top of printUsers.html I have:
#{extends 'App/main.html' /}

This includes styles and a header which has buttons and drop-downs.
When the user clicks the print button, I want to hide all the header and buttons etc, which come from the main.html.
I tried wrapping it into a div, giving it an id and hiding it but this didn't work.

I have just started using javascript so any help would be much appreciated.
Thanks.

Have you tried setting display:none; to whatever elements you want hidden in your print @media print CSS? Take a look at stackoverflow.com/a/7644857/1451422 — Jeff Noel
– Jeff Noel, Commented Jan 8, 2013 at 14:40
yep. That's what i'm doing for certain buttons which are wrapped in divs. But I couldn't understand how to hide elements (like a header) which extends from a different page i.e main.html. — Eddie
– Eddie, Commented Jan 8, 2013 at 15:51
Even when they are extended, they are supposed to be "loaded" inside the actual page. so if you want to hide to header element, take a look at my answer (I edited it). — Jeff Noel
– Jeff Noel, Commented Jan 8, 2013 at 16:04
excellent. Didn't realise that I could add elements into my media.print which were extended. I gave the header an Id and it does just what I want. Thanks. — Eddie
– Eddie, Commented Jan 8, 2013 at 16:23

Jeff Noel · Accepted Answer · 2013-01-08 16:05:04Z

6

The CSS way

@media print

Use @media Print as you stated in your question, but include all the elements you don't want to see in your printed result, and put display:none to them. You can also apply some margin:0 auto; text-align:center; to your main content if you want to center it into your page.

Edit: You can hide any element, such as header this way:

header
{
    display:none;
}

footer
{
    display:none;
}

The Javascript way

Button's onClick

Your button's onclick:

Button onClick()

<button id="printThatText" name="printThatText" onclick="printPage();">Print this page</button>"

Your javascript code in the header (or at the end of the page)

Javascript

function printPage()
{
    var myDropDown = document.getElementById('myDropDown');
    myDropDown.style.display = "none";
    //Whatever other elements to hide.
    window.print();
    myDropDown.style.display = "block";
    return true;
}

You could also put all of these elements in an array and make a for ... in ... loop to show/hide them.

edited Jan 8, 2013 at 16:05

answered Jan 8, 2013 at 14:50

Jeff Noel

7,6274 gold badges43 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eddie Over a year ago

I'm currently using display:none within my media print, in order to hide buttons. The buttons were easy because I just put them in a div, and add the div id to my @media print (just as you said). However, the header extends from a different html page so this is what confuses me as I can't wrap the text : #{extends 'Application/main.html' /}, inside a div? Did you mean that I should add the id of the header (which is in main.html) to my media Print?

epascarello · Accepted Answer · 2013-01-08 14:47:19Z

1

Wrap the contents with an element that encapsulates all of stuff you want to hide. In the print CSS, set the display to none.

The CSS:

@media print {
    #myHeader, #myFooter { display: none }
}

The HTML:

<div id="myHeader">
  <ul>
    <li>
      <a>My link</a>
   </li>
 </ul>
</div>
<div id="myContent">
  <p>This will print fine</p>
</div>
<div id="myFooter">
  <p>This will not print</p>
</div>

You could always use HTML5 header/footer elements!

answered Jan 8, 2013 at 14:47

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:27:42Z

0

Maybe try the opposite--print only a particular div--rather than hiding other divs: Print <div id=printarea></div> only?

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Jan 8, 2013 at 14:41

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Collectives™ on Stack Overflow

How do I print a page using javascript and hide headers?

3 Answers 3

The CSS way

@media print

The Javascript way

Button's onClick

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

The CSS way

@media print

The Javascript way

Button's onClick

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related