Answers:
在样式表中添加:
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}
然后class='no-print'
在您不想显示在打印版本中的HTML中(例如按钮)添加(或将no-print类添加到现有的class语句中)。
@media print { .no-print, .no-print * { display: none !important; } }
<link rel="stylesheet" href="all.css" media="screen, print" type="text/css">
@media screen
定义仅屏幕样式的情况下才需要,但实际情况并非如此:默认情况下,将显示所有元素,并且通过定义仅打印样式来隐藏该元素就足以使其仍然显示在屏幕上。
引导3有其自己的这个类叫做:
hidden-print
定义如下:
@media print {
.hidden-print {
display: none !important;
}
}
您不必自己定义。
在Bootstrap 4中,它已更改为:
.d-print-none
! important
救了我。
最佳做法是使用专门用于打印的样式表,并将其media
属性设置为print
。
在其中,显示/隐藏要在纸上打印的元素。
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
这是放置此CSS的简单解决方案
@media print{
.noprint{
display:none;
}
}
这是HTML
<div class="noprint">
element that need to be hidden when printing
</div>
<div class="noprint">
element that need to be hidden when printing
</div>
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>
您可以将链接放在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的开头部分执行此操作,并使用media属性指定第二个样式表。
@media print {
.no-print {
visibility: hidden;
}
}
<div class="no-print">
Nope
</div>
<div>
Yup
</div>
狄奥多斯接受的答案对我们中的某些人(即使不是所有人)也不起作用。我仍然无法隐藏我的“打印此按钮”以免出现在纸上。
克林特·帕克(Clint Pachl)通过添加对css文件进行的少量调整
media="screen, print"
而不仅仅是
media="screen"
正在解决这个问题。因此,为了清楚起见,并且因为不容易看到Clint Pachl在注释中隐藏了其他帮助。用户应在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">
我认为可以为每个人解决这个问题。
如果您的Java语言会干扰单个元素的style属性,从而造成干扰,则!important
建议您处理事件onbeforeprint
和onafterprint
。https://developer.mozilla.org/zh-CN/docs/Web/API/WindowEventHandlers/onbeforeprint
@media
打印和@media
屏幕。在打印部分中,放置要打印的样式。在“屏幕屏幕”部分中,放置样式以进行屏幕打印。您甚至可以为不同的分辨率设置多个屏幕部分。基本上,如果您仅添加此答案中给出的内容,它将无法正常工作。相信我,我已经尝试过了。那么,如何获得69票赞成票?