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

I have a link on my webpage to print the webpage. However, the link is also visible in the printout itself.

我在我的网页上有一个链接来打印网页。然而，在打印输出本身中也可以看到链接。

Is there javascript or HTML code which would hide the link button when I click the print link?

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

Example:

例子:

 "Good Evening"
 Print (click Here To Print)

I want to hide this "Print" label when it prints the text "Good Evening". The "Print" label should not show on the printout itself.

我想隐藏这个“打印”标签，当它打印文本“晚安”。“打印”标签不应该显示在打印输出本身。

9 个解决方案

#1

In your stylesheet add:

在样式表添加:

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

Then add class='no-print' (or add the no-print class to an existing class statement) in your HTML that you don't want to appear in the printed version, such as your button. I got this to work with 'noPrint' instead of 'noprint' (lowercase).

然后在HTML中添加class='no-print'(或将no-print类添加到现有的类语句中)，您不希望在打印版本中出现，例如按钮。我用noPrint而不是小写的noPrint。

#2

The best practice is to use a style sheet specifically for printing, and and set its media attribute to print.

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

In it, show/hide the elements that you want to be printed on paper.

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

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

#3

Bootstrap 3 has its own class for this called:

Bootstrap 3有它自己的类:

hidden-print

It is defined like this:

它的定义如下:

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

You do not have to define it on your own.

您不必自己定义它。

---

In Bootstrap 4 this has changed to:

在Bootstrap 4中，已将其改为:

.d-print-none

#4

CSS FILE

CSS文件

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


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

HTML HEADER

HTML头

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

ELEMENT

元素

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

#5

Here is a simple solution put this CSS

这里有一个简单的解决方案。

<style>
@media print{
   .noprint{
       display:none;
   }
}

and here is the HTML

这是HTML。

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

#6

The best thing to do is to create a "print-only" version of the page.

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

Oh, wait... this isn't 1999 anymore. Use a print CSS with "display: none".

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

#7

You could place the link within a div, then use JavaScript on the anchor tag to hide the div when clicked. Example (not tested, may need to be tweaked but you get the idea):

您可以将链接放置在div中，然后在锚标记上使用JavaScript在单击时隐藏div。例子(没有经过测试，可能需要进行调整，但您可以理解):

<div id="printOption">
    <a href="javascript:void();" 
       onclick="document.getElementById('printOption').style.visibility = 'hidden'; 
       document.print(); 
       return true;">
       Print
    </a>
</div>

The downside is that once clicked, the button disappears and they lose that option on the page (there's always Ctrl+P though).

缺点是一旦点击，按钮就消失了，他们在页面上就失去了那个选项(尽管总是按Ctrl+P)。

The better solution would be to create a print stylesheet and within that stylesheet specify the hidden status of the printOption ID (or whatever you call it). You can do this in the head section of the HTML and specify a second stylesheet with a media attribute.

更好的解决方案是创建一个打印样式表，并在该样式表中指定printOption ID的隐藏状态(或您所调用的任何内容)。您可以在HTML的head部分中这样做，并使用media属性指定第二个样式表。

#8

@media print {
  .no-print {
    visibility: hidden;
  }
}

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

<div>
  Yup
</div>

#9

The accepted answer by diodus is not working for some if not all of us. I could not still hide my Print this button from going out on to paper.

狄奥杜斯公认的答案不是对我们所有人都适用。我仍然无法隐藏我打印的按钮，使它不能打印出来。

The little adjustment by Clint Pachl of calling css file by adding on

通过添加调用css文件的Clint Pachl进行的小调整

      media="screen, print" 

and not just

而不只是

      media="screen"

is solving this problem. So for clarity and because it is not easy to see Clint Pachl hidden additional help in comments. The user should include the ",print" in css file with the desired formating.

是解决这一问题。所以为了清晰，也因为很难看到克林特·帕奇在评论中隐藏了额外的帮助。用户应该在css文件中包含“，print”，并使用所需的格式。

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

and not the default media = "screen" only.

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

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

That i think solves this problem for everyone.

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