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

时间:2008-12-10 07:11:24

标签: css printing

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

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

示例:

 "Good Evening"
 Print (click Here To Print)

我想在打印文本“晚安”时隐藏此“打印”标签。 “打印”标签不应显示在打印输出本身上。

10 个答案:

答案 0 :(得分:672)

在样式表中添加:

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

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

答案 1 :(得分:163)

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

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

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

答案 2 :(得分:144)

Bootstrap 3的http://realtoraxe.com/realtoraxe/public/名为:

hidden-print

它的定义如下:

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

您无需自行定义。

its own class for this中,这已更改为:

.d-print-none

答案 3 :(得分:31)

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

<style>
@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>

答案 4 :(得分:12)

CSS FILE

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


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

HTML HEADER

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

元素

<div class="no-print"></div>

答案 5 :(得分:7)

您可以将链接放在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(或您称之为的任何ID)的隐藏状态。您可以在HTML的head部分执行此操作,并指定具有media属性的第二个样式表。

答案 6 :(得分:6)

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

哦,等等......这不再是1999了。使用带有“display:none”的打印CSS。

答案 7 :(得分:5)

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

<div>
  Yup
</div>

答案 8 :(得分:3)

diodus接受的答案对某些人来说并不适用,如果不是全部的话。 我无法隐藏我打印这个按钮,不会出纸。

Clint Pachl通过添加

来调用css文件的小调整
      media="screen, print" 

而不仅仅是

      media="screen"

正在解决这个问题。因此,为了清晰起见,并且因为不容易看到Clint Pachl在评论中隐藏了额外的帮助。 用户应该包括&#34;,print&#34;在具有所需格式化的css文件中。

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

而不是默认媒体=&#34;屏幕&#34;仅

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

我认为每个人都能解决这个问题。

答案 9 :(得分:1)

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

豫ICP备18024241号-1