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

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

问题如下：
网站上的所有页面，从主页扩展而来。因此，在printUsers.html的顶部，我有：

{extends'App/main.html'/}

这包括样式和带有按钮和下拉列表的标题。
当用户单击打印按钮时，我想隐藏main.html中的所有标题和按钮等。
我试着把它包装成一个div，给它一个id，然后把它隐藏起来，但没有成功。

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

---

谢谢。

也许可以尝试相反的方法——只打印一个特定的div，而不是隐藏其他div:

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

CSS:

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

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

HTML:

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

<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页眉/页脚元素

CSS方式 @媒体印刷品 如您在问题中所述，使用

@media Print

，但包括您不希望在打印结果中看到的所有元素，并将

display:none

放入其中。您还可以应用一些

边距：0自动；文本对齐：居中添加到主要内容”

编辑：您可以通过以下方式隐藏任何元素，例如
标题
：

header
{
    display:none;
}

footer
{
    display:none;
}


Javascript方式
按钮的一次点击
您的按钮的onclick：

点击按钮（）


您还可以将所有这些元素放在一个数组中，并为。。。在…

循环中显示/隐藏它们。

是否尝试设置

显示：无

到您想要隐藏在print@media print CSS中的任何元素？看看，是的。这就是我为某些用div包装的按钮所做的。但我不明白如何隐藏从不同页面（如main.html）扩展的元素（如标题）。即使扩展了元素，它们也应该“加载”到实际页面中。所以，如果您想隐藏到

标题
元素，请查看我的答案（我编辑了它）。非常好。我没有意识到我可以在我的媒体上添加元素，这些元素被扩展了。我给了标题一个Id，它正是我想要的。谢谢。太好了，我很高兴能帮助您，先生。我目前正在使用“媒体打印”中的“显示：无”，以便隐藏按钮。这些按钮很简单，因为我只是将它们放在一个div中，然后将div id添加到我的@media打印中（正如您所说）。但是，标题是从另一个html页面扩展而来的，这让我很困惑，因为我无法将文本包装为：#{extends'Application/main.html'/}，在div中？您的意思是我应该将标题的id（在main.html中）添加到媒体打印中吗？