打印网页时如何隐藏元素?

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

是否有javascript或HTML代码，将隐藏链接按钮时，我点击打印链接?

例子:

 "Good Evening"
 Print (click Here To Print)

我想在打印文本“Good Evening”时隐藏这个“Print”标签。“打印”标签不应该显示在打印输出本身上。

当前回答

在样式表中添加:

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

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

其他回答

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

在其中，显示/隐藏你想打印在纸上的元素。

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

Bootstrap 3有自己的类，叫做:

hidden-print

它的定义如下:

@media print {
  .hidden-print {
    display: none !important;
  }
}

你不需要自己定义它。

在Bootstrap 4和Bootstrap5中，这已更改为:

.d-print-none

在样式表中添加:

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

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

这里有一个简单的解决办法放这个CSS

@media print{
   .noprint{
       display:none;
   }
}

这是HTML

<div class="noprint">
    element that need to be hidden when printing
</div>

diodus所接受的答案对我们中的一些人甚至所有人都不起作用。我还是无法隐藏我的“打印这个按钮”，不让它印在纸上。

克林特Pachl通过添加调用css文件的小调整

      media="screen, print"

不仅仅是

      media="screen"

就是解决这个问题。所以为了清晰起见，因为不容易看到克林特·帕切尔在评论中隐藏了额外的帮助。用户应该在css文件中包含所需格式的“，print”。

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

而不是默认的media = "screen"。

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

我认为这解决了所有人的问题。

推荐文章