【发布时间】：2010-09-26 04:48:24
【问题描述】：
我的网页上有一个链接可以打印该网页。但是，该链接在打印输出本身中也可见。
是否有 javascript 或 HTML 代码会在我单击打印链接时隐藏链接按钮？
例子：
"Good Evening"
Print (click Here To Print)
我想在打印文本“晚安”时隐藏此“打印”标签。 “打印”标签不应显示在打印输出本身上。
【问题讨论】：
【发布时间】：2010-09-26 04:48:24
【问题描述】：
您可以将链接放在 div 中，然后在锚标记上使用 JavaScript 在单击时隐藏 div。示例（未经测试，可能需要调整，但你明白了）：
<div id="printOption">
<a href="javascript:void();"
onclick="document.getElementById('printOption').style.visibility = 'hidden';
document.print();
return true;">
Print
</a>
</div>
缺点是一旦点击，按钮就会消失，并且他们会失去页面上的选项（尽管总是有 Ctrl+P）。
更好的解决方案是创建一个打印样式表，并在该样式表中指定printOption ID（或您所称的任何名称）的隐藏状态。您可以在 HTML 的 head 部分执行此操作，并使用 media 属性指定第二个样式表。
【讨论】：
最佳做法是使用专门用于打印的样式表，并将其media 属性设置为print。
在其中，显示/隐藏要打印在纸上的元素。
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
【讨论】：
-
在这里，您还应该有 css 以不显示其他包装内容，将 font-family 更改为更好的值，删除宽度以允许完全使用页面。如果您将主样式表设置为 media="screen"，您可以将打印样式表视为新的游戏。
-
绝对。使用这种方法，您可以删除“单击此处查看可打印版本”或添加“此页面对打印机友好”或类似内容。正如 Steve Perks 所说，好的做法是删除所有不必要的内容，如导航、广告等。仅包含页面的主要内容。
在您的样式表中添加：
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}
然后在您的 HTML 中添加您不想出现在打印版本中的 class='no-print'（或将 no-print 类添加到现有的类语句中），例如您的按钮。
【讨论】：
-
这个答案不完整。你必须有两个媒体部分。
@media打印和@media屏幕。在打印部分，您可以放置样式以进行打印。在丝网部分中，您可以放置用于丝网印刷的样式。您甚至可以为不同的分辨率设置多个屏幕部分。基本上，如果您只是添加此答案中给出的内容，它将不起作用。相信我我已经试过了。那么这是如何获得 69 票的呢？ -
实际上，如果您只使用给出的代码，它确实有效。我刚刚在Firefox中尝试过。所以，至少在现代浏览器中这是解决方案。
-
我确实试图隐藏一个里面有几个子元素。问题是某些元素在打印时仍然可见。解决方案是使用这个 css：
@media print { .no-print, .no-print * { display: none !important; } }这可能会也可能不会，具体取决于指定的媒体。例如，要将屏幕样式和打印样式组合在一个样式表中，然后在该样式表中使用媒体查询，正如这个答案所暗示的，您必须同时指定“屏幕”和“打印”媒体类型：<link rel="stylesheet" href="all.css" media="screen, print" type="text/css">@Codeguy007：我不明白你的意思。如果您想定义仅屏幕样式，则只需要@media screen，但这里不是这种情况：默认情况下，所有元素都会显示，并且通过定义隐藏元素的仅打印样式完全足以使其仍然出现在屏幕上。
最好的办法是创建页面的“仅打印”版本。
哦，等等……这已经不是 1999 年了。使用带有“display: none”的打印 CSS。
【讨论】：
-
可打印版本仍有一些价值，因为它清楚地向用户展示了他们在打印时会得到什么，这可能会被 CSS 技术滥用
-
除此之外，您还可以在打印版本中包含其他内容，例如链接引用、页脚等。在未来的日子里，其中很多内容也可以通过 css 实现。
-
@annakata：用户已经可以在他们的浏览器上使用“打印预览”来获得它。作为奖励，这实际上就是它的用途。
CSS 文件
@media print
{
#pager,
form,
.no-print
{
display: none !important;
height: 0;
}
.no-print, .no-print *{
display: none !important;
height: 0;
}
}
HTML 标题
<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >
元素
<div class="no-print"></div>
【讨论】：
Bootstrap 3 调用了 its own class for this：
hidden-print
它是这样定义的：
@media print {
.hidden-print {
display: none !important;
}
}
您不必自己定义。
在 Bootstrap 4 和 Bootstrap5 中，这已更改为：
.d-print-none
【讨论】：
这是一个简单的解决方案 把这个 CSS
@media print{
.noprint{
display:none;
}
}
这里是 HTML
<div class="noprint">
element that need to be hidden when printing
</div>
【讨论】：
-
在这里，类比 id 更好，原因很简单，如果您使用 id，那么您只能将此规则应用于每页的一件事。一个类可以让你在任何需要的地方应用它。
-
而且我相信你可以将 display:none 更改为 visibility:hidden 如果你希望它的项目占用相同的空间，而不是显示。
-
所以，一个简单可行的解决方案。之前我以为我们不能影响页面的打印版本。
-
这应该标记为已批准的答案。
@media print {
.no-print {
visibility: hidden;
}
}<div class="no-print">
Nope
</div>
<div>
Yup
</div>【讨论】：
diodus 接受的答案对我们中的某些人（如果不是所有人）都不起作用。 我仍然无法隐藏我的“打印此按钮”，以免打印到纸上。
Clint Pachl 对添加调用css文件的小调整
media="screen, print"
不只是
media="screen"
正在解决这个问题。所以为了清楚起见，因为不容易看到 Clint Pachl 在 cmets 中隐藏了额外的帮助。 用户应在 css 文件中包含所需格式的“,print”。
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">
而不是默认媒体 =“屏幕”。
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">
我认为这可以为每个人解决这个问题。
【讨论】：
如果您的 Javascript 会干扰单个元素的样式属性，从而覆盖 !important，我建议处理事件 onbeforeprint 和 onafterprint。 https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint
【讨论】：
-
谢谢，这为我节省了很多时间！
正如 Elias Hasle 所说，JavaScript 可以覆盖 !important。所以，我用理论上的实现扩展了他的答案。
这段代码用no-print类标识所有元素，打印前用CSS隐藏，打印后恢复原来的样式：
var noPrintElements = [];
window.addEventListener("beforeprint", function(event) {
var hideMe = document.getElementsByClassName("no-print");
noPrintElements = [];
Array.prototype.forEach.call(hideMe, function(item, index) {
noPrintElements.push({"element": item, "display": item.style.display });
item.style.display = 'none'; // hide the element
});
});
window.addEventListener("afterprint", function(event) {
Array.prototype.forEach.call(noPrintElements, function(item, index) {
item.element.style.display = item.display; // restore the element
});
noPrintElements = []; // just to be on the safe side
});
【讨论】：