关于CSS:在打印网页时如何隐藏元素?

How do I hide an element when printing a web page?

我的网页上有一个链接可以打印该网页。 但是,该链接在打印输出本身中也是可见的。

单击打印链接时,是否存在会隐藏链接按钮的JavaScript或HTML代码?

例:

1
2
"Good Evening"
 Print (click Here To Print)

我要在打印文本" Good Evening"时隐藏该"打印"标签。"打印"标签不应显示在打印输出本身上。


在样式表中添加:

1
2
3
4
5
6
7
@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

然后在您不想显示在打印版本(例如按钮)中的HTML中添加class='no-print'(或将no-print类添加到现有的class语句中)。


最佳实践是使用专门用于打印的样式表,并将其media属性设置为print

在其中,显示/隐藏要在纸上打印的元素。

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


Bootstrap 3为此具有自己的类:

1
hidden-print

定义如下:

1
2
3
4
5
@media print {
  .hidden-print {
    display: none !important;
  }
}

您不必自己定义。

在Bootstrap 4中,它已更改为:

1
.d-print-none


这是一个简单的解决方案
把这个CSS

1
2
3
4
5
6
<style>
@media print{
   .noprint{
       display:none;
   }
}

这是HTML

1
2
3
4
    element that need to be hidden when printing


    element that need to be hidden when printing


CSS文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@media print
{
    #pager,
    form,
    .no-print
    {
        display: none !important;
        height: 0;
    }


    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }
}

HTML标题

1
<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css">

元件

1
 

您可以将链接放置在div中,然后在锚点标记上使用JavaScript来在单击时隐藏div。示例(未经测试,可能需要调整,但您明白了):

1
2
3
4
5
    <a href="javascript:void();"
       onclick="document.getElementById('printOption').style.visibility = 'hidden';
       document.print();
       return true;"
>
       Print

缺点是,一旦单击该按钮,该按钮就会消失,并且在页面上将丢失该选项(尽管始终为Ctrl + P)。

更好的解决方案是创建一个打印样式表,并在该样式表中指定printOption ID(或任何您称呼它)的隐藏状态。您可以在HTML的开头部分执行此操作,并使用media属性指定第二个样式表。


最好的办法是创建页面的"仅打印"版本。

哦,等等...这已经不是1999年了。使用带有"显示:无"的打印CSS。


1
2
3
4
5
@media print {
  .no-print {
    visibility: hidden;
  }
}
1
2
3
4
5
  Nope



  Yup


狄奥多斯接受的答案对我们中的某些人(即使不是所有人)也不起作用。
我仍然无法隐藏我的"打印此按钮"以免出现在纸上。

克林特·帕克(Clint Pachl)通过添加对css文件进行的少量调整

1
      media="screen, print"

而不仅仅是

1
      media="screen"

正在解决这个问题。因此,为了清楚起见,并且因为不容易看到Clint Pachl在注释中隐藏了其他帮助。
用户应在css文件中包含所需格式的",print"。

1
     <link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">

而不是仅默认媒体="屏幕"。

1
    <link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">

我认为可以为每个人解决这个问题。


如果您的Java语言会干扰单个元素的样式属性,从而覆盖了!important,则建议处理事件onbeforeprintonafterprint。 https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint