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


440

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

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

例:

 "Good Evening"
 Print (click Here To Print)

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

Answers:


743

在样式表中添加:

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

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


17
这个答案不完整。您必须有两个媒体部分。@media打印和@media屏幕。在打印部分中,放置要打印的样式。在“屏幕屏幕”部分中,放置样式以进行屏幕打印。您甚至可以为不同的分辨率设置多个屏幕部分。基本上,如果您仅添加此答案中给出的内容,它将无法正常工作。相信我,我已经尝试过了。那么,如何获得69票赞成票?
Codeguy007

6
实际上,如果您只使用给出的代码,它确实可以工作。我只是尝试在Firefox。因此,至少在现代浏览器中,这是解决方案。
luschn

8
我确实尝试隐藏一个带有几个子元素的<div>。问题在于某些元素在打印中仍然可见。解决方案是使用此CSS:@media print { .no-print, .no-print * { display: none !important; } }
Philipp

6
根据指定的媒体,此方法可能有效也可能无效。例如,要在一个样式表中同时组合屏幕样式和打印样式,然后在该样式表中使用媒体查询,如该答案所示,您必须同时指定“屏幕”和“打印”媒体类型:<link rel="stylesheet" href="all.css" media="screen, print" type="text/css">
Clint Pachl

5
@ Codeguy007:我不明白你的意思。仅在需要@media screen定义仅屏幕样式的情况下才需要,但实际情况并非如此:默认情况下,将显示所有元素,并且通过定义仅打印样式来隐藏该元素就足以使其仍然显示在屏幕上。
chiccodoro


167

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

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

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

9
在这里,您还应该使用CSS来不显示其他包装内容,将字体系列更改为更好的值,删除宽度以完全使用页面。如果将主样式表设置为media =“ screen”,则可以将打印样式表视为新的游戏。
史蒂夫·珀克斯

2
绝对。使用这种方法,您可以删除“单击此处以获取可打印版本”,也可以添加“此页面适合打印”。正如史蒂夫·珀克斯(Steve Perks)所说,好的做法是删除所有不必要的内容,例如导航,广告等。仅包括页面的主要内容。
09年

39

这是放置此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>

3
在这里,与id相比,类是一个更好的选择,原因很简单:如果使用id,则只能将此规则应用于每页一件事。一个类可以让您在需要的地方应用它。
尼克

12

CSS文件

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


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

HTML标题

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

元件

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

10

您可以将链接放在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)。

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


6

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

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


1
可打印版本仍然具有一些价值,因为它可以清晰地向用户显示他们在打印时会得到的内容,而CSS技术会滥用这些内容
annakata

1
除此之外,您还可以在印刷版中包含其他内容,例如链接引用,页脚等。在未来的日子里,尽管如此,很多也可以通过CSS来实现。
史蒂夫·珀克斯

8
@annakata:用户已经可以在其浏览器上使用“打印预览”来获取该信息。作为奖励,这实际上就是它的用途。
递归


3

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

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

      media="screen, print" 

而不仅仅是

      media="screen"

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

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

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

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

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.