打印页面时隐藏 HTML div答案

【问题标题】：hide HTML div when printing page打印页面时隐藏 HTML div
【发布时间】：2012-08-26 10:32:52
【问题描述】：

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

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

谢谢！

【问题讨论】：

【解决方案1】：

试试这个：

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

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

【讨论】：

【解决方案2】：

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

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

它会正常显示，但是当你去打印时，它会使用那个 CSS 类。

【讨论】：

【解决方案3】：

将 print.css 添加到您的页面中，在该页面中隐藏您不想打印的所有元素

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

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

在那个文件里你可以有

.admindetails{
   display:none;
}

【讨论】：

【解决方案4】：

当然，您可以添加不同的样式表进行打印，请参见下面的示例

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

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

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

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

【讨论】：