打印页面时隐藏HTML div

Question

我有一个基于XHTML的页面，其中包含管理员信息。管理员应该能够打印该页面，但我希望页面隐藏他们的信息。

在打印页面时是否有设置打印区域的方法，或者唯一可行的解决方案是在单击“打印”按钮时打开一个不包含管理员信息的辅助页面？

谢谢！

- steeped

Answer 1

试试这个：

<style type="text/css" media="print">
.dontprint
{ display: none; }
</style>

<div class="dontprint">I'm only visible on the screen</div>

- nickel715

---

但是元素完全消失了，甚至在常见的浏览器视图中也看不到。如何使其在网站上可见，但在我想打印时使打印机忽略它而不会重定向到其他网站？ - arrowman

Answer 2

您可以使用以下代码将该 div 的 CSS 设置为 display: none：

@media print {
    div.do-not-print {display: none;}
}

这将以正常方式显示，但当您打印时，它将使用该CSS类。

- Gary

Answer 3

将print.css添加到您的页面中，在其中隐藏所有不希望打印的元素。

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

media="print" 属性告诉浏览器使用特定的CSS文件。

在那个文件中，您可以有:

.admindetails{
   display:none;
}

- Slavenko Miljic

Answer 4

当然，你可以为打印添加不同的样式表，以下是示例：

确保在打印时添加不同的样式表，参见下面的示例

<link href="print.css"  rel="stylesheet" type="text/css" media="print" />

或者在现有的样式表中，您可以添加媒体查询。

@media print {
    .no-print {display: none;}
}

在不想打印HTML元素的地方添加.no-print类。

- Santosh Khalse