2

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

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

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

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

4

3 回答 3

6

CSS方式

@媒体打印

按照您在问题中的说明使用@media Print，但包括您不想在打印结果中看到的所有元素，并放入display:none它们。margin:0 auto; text-align:center;如果您想将其置于页面中心，您也可以将一些内容应用于您的主要内容。

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

header
{
    display:none;
}

footer
{
    display:none;
}

Javascript 方式

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

于 2013-01-08T14:50:32.610 回答
1

用一个封装了所有你想隐藏的东西的元素来包装内容。在打印 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 页眉/页脚元素！

于 2013-01-08T14:47:19.433 回答
0

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

于 2013-01-08T14:41:03.637 回答