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

Question

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

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

示例：

 "Good Evening"
 Print (click Here To Print)

我想在打印文本“Good Evening”时隐藏此“Print”标签。 “打印”标签不应出现在打印输出本身上。

Answer 1

在样式表中添加：

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

然后在您不希望出现在打印版本中的 HTML 中添加 class='no-print' （或将 no-print 类添加到现有的类语句中） ，例如您的按钮。

Answer 2

Bootstrap 3 有它的自己的类 称为：

hidden-print

它的定义如下：

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

您不必自己定义它。

---

在 Bootstrap 4 和 Bootstrap5 这已更改为：

.d-print-none

Answer 3

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

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

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

Answer 4

这是一个简单的解决方案
放置此 CSS

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

，这里是 HTML

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

Answer 5

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>

Answer 6

您可以将链接放置在 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 部分执行此操作，并指定带有媒体属性的第二个样式表。

Answer 7

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

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

<div>
  Yup
</div>

Answer 8

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

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

Answer 9

diodus 接受的答案对我们中的一些人（如果不是所有人）来说不起作用。
我仍然无法隐藏“打印此”按钮，以免出现在纸上。

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">

而不仅仅是默认的 media =“screen”。

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

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

Answer 10

如果您的 Javascript 会干扰各个元素的样式属性，从而覆盖 !important，我建议处理 onbeforeprint 和 onafterprint 事件。 https://developer.mozilla.org/en-US/docs /Web/API/WindowEventHandlers/onbeforeprint

Answer 11

正如 Elias Hasle 所说，JavaScript 可以覆盖 !important。因此，我通过理论实现扩展了他的答案。

此代码标识所有带有 no-print 类的元素，在打印之前用 CSS 隐藏它们，并在打印后恢复原始样式：

var noPrintElements = [];

window.addEventListener("beforeprint", function(event) {
   var hideMe = document.getElementsByClassName("no-print");
   noPrintElements = [];
   Array.prototype.forEach.call(hideMe, function(item, index) {
      noPrintElements.push({"element": item, "display": item.style.display });
      item.style.display = 'none'; // hide the element
   });   
});

window.addEventListener("afterprint", function(event) {
   Array.prototype.forEach.call(noPrintElements, function(item, index) {
      item.element.style.display = item.display; // restore the element
   });      
   noPrintElements = []; // just to be on the safe side
});