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

Question

我的网站上有一个名为 printUsers.html 的页面。
上面有一个使用“javascript:window.print()”打印页面的按钮。
我还在页面上使用“@media print”来在打印页面时隐藏一些按钮。
这一切都很好，我在这里没有问题。

问题如下：
网站上的所有页面都从主页扩展。所以在 printUsers.html 的顶部我有：
#{extends 'App/main.html' /}

这包括样式和带有按钮和下拉菜单的标题。
当用户单击打印按钮时，我想隐藏来自 main.html 的所有标题和按钮等。
我尝试将它包装到一个 div 中，给它一个 id 并隐藏它，但这不起作用。

我刚刚开始使用 javascript，因此非常感谢任何帮助。
谢谢。

Answer 1

也许尝试相反的方法——只打印一个特定的 div——而不是隐藏其他 div：Print <div id=printarea></div> only?

Answer 2

用一个封装了所有你想隐藏的东西的元素来包装内容。在打印 CSS 中，将显示设置为无。

CSS：

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

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>

您总是可以使用 HTML5 页眉/页脚元素！

Answer 3

CSS 方式

@媒体打印

如您在问题中所述，使用@media Print，但包含您不想在打印结果中看到的所有元素，并将display:none 放入其中。如果您想在页面中居中显示主要内容，还可以将一些 margin:0 auto; text-align:center; 应用到您的主要内容中。

编辑：您可以这样隐藏任何元素，例如header：

header
{
    display:none;
}

footer
{
    display:none;
}

---

Javascript 方式

按钮的点击

您的按钮的点击：

按钮 onClick()

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

页眉（或页面末尾）中的 javascript 代码

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

---

您还可以将所有这些元素放在一个数组中，然后创建一个for ... in ... 循环来显示/隐藏它们。