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

Question

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

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

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

我刚刚开始使用javascript，因此任何帮助将不胜感激。
谢谢。

Answer 1

CSS方式

@媒体印刷

使用@media Print您在问题中所述的方法，但将所有不想在打印结果中看到的元素包括进去display:none。margin:0 auto; text-align:center;如果要将某些内容居中放置在页面中，也可以将其应用于主要内容。

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

header
{
    display:none;
}

footer
{
    display:none;
}

Javascript方式

按钮的onClick

您的按钮的onclick：

按钮onClick（）

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

标头（或页面末尾）中的JavaScript代码

Java脚本

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 ...循环以显示/隐藏它们。