如何在打印网页时隐藏一个元素？

我的网页上有一个链接，可以打印网页。然而，这个链接在打印出来的文件中也是可见的。

是否有javascript或HTML代码可以在我点击打印链接时隐藏链接按钮？

例子。

 "Good Evening"
 Print (click Here To Print)

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

TRiG
已编辑的问题 14日 十月 2015 в 11:14
编程
printing css
10日 十二月 2008 в 7:11
28 种观点

在你的样式表中添加。

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

然后在你的HTML中添加class='no-print'（或将no-print类添加到现有的类声明中），你不希望在印刷版中出现，例如你的按钮。

The Guy with The Hat
编辑本段答案4日 十二月 2018 в 3:22
评论(8)

最好的做法是使用专门用于打印的样式表，并将其媒体属性设置为打印。

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

rudolph1024
编辑本段答案17日 七月 2015 в 8:55
评论(2)

Bootstrap 3有[它的自带的类][1]调用。

hidden-print

它的定义是这样的。

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

你不必自己定义它。

在[Bootstrap 4][2]中，这句话被改为：

.d-print-none

。

.d-print-none

[1]: https://getbootstrap.com/docs/3.3/css/#responsive-utilities-print [2]: https://getbootstrap.com/docs/4.3/utilities/display/#display-in-print

Bijan
编辑本段答案2日 四月 2019 в 8:51
评论(2)

这里有一个简单的解决方案 放这个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>
Tac Tacelosky
编辑本段答案20日 二月 2019 в 12:19
评论(2)

CSS文件

@media print
{
    #pager,
    form,
    .no-print
    {
        display: none !important;
        height: 0;
    }

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

HTML HEADER

ELEMENT

<div class="no-print"></div>
评论(0)

你可以把链接放在一个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部分这样做，并指定第二个带有媒体属性的样式表。

Lucky
编辑本段答案14日 三月 2017 в 1:23
评论(0)

最好的办法是创建一个"print-only&quot。 版本的页面。

哦，等等... 这不是1999年了。 使用带有"display.none"的打印CSS。 none".

评论(3)

<！--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->

@media print {
  .no-print {
    visibility: hidden;
  }
}
<div class="no-print">
  Nope
</div>

<div>
  Yup
</div>

<！--结束片段-->

评论(0)

diodus所接受的答案对我们中的一些人来说是无效的，如果不是所有的人。 我不能仍然隐藏我的打印这个按钮从出去到纸上。

Clint Pachl对css文件的调用进行了小小的调整，增加了以下内容

      media="screen, print"

而不仅仅

      media="screen"

正在解决这个问题。 因此，为了清楚起见，并且因为不容易看到Clint Pachl在评论中隐藏的额外帮助。 用户应该将",print" 在css文件中加入所需的格式。

而不是默认的媒体="屏幕&quot。 只。

这我想为大家解决了这个问题。

评论(0)

如果你的Javascript干扰了单个元素的样式属性，从而覆盖了！重要，我建议处理onbeforeprint和onafterprint事件。 https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint

评论(0)