admin管理员组

文章数量:1296331

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 e 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.

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 e 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.

• javascript
• html
• extends

Share Improve this question Follow edited May 14, 2019 at 10:52 Bhargav Rao 52.2k2929 gold badges127127 silver badges141141 bronze badges asked Jan 8, 2013 at 14:38 EddieEddie 62144 gold badges1313 silver badges2323 bronze badges 5

• 1 Have you tried setting display:none; to whatever elements you want hidden in your print @media print CSS? Take a look at stackoverflow./a/7644857/1451422 – 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 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 Commented Jan 8, 2013 at 16:04
• 1 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 Commented Jan 8, 2013 at 16:23
• possible duplicate of Print <div id=printarea></div> only? – Brad Werth Commented Sep 19, 2014 at 22:19

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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!

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

本文标签： htmlHow do I print a page using javascript and hide headersStack Overflow