关于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，则建议处理事件onbeforeprint和onafterprint。 https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint