如何使用javascript打印页面并隐藏标题？

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.

Answer 1

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

Answer 2

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!

Answer 3

也许尝试相反的做法 -仅打印特定的div-而不是隐藏其他div：仅打印<div id = printarea> </ div>？