CSS方式

Question

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

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

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

我刚开始使用javascript，所以任何帮助都会非常感激。
感谢。

Answer 1

CSS方式

@media print

按照问题中的说明使用@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代码

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

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

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

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

3 个答案:

CSS方式

@media print

Javascript方式

按钮的onClick