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>

您可以将链接放在一个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的头部部分执行此操作，并使用media属性指定第二个样式表。

Bootstrap 3有自己的类，叫做:

hidden-print

它的定义如下:

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

你不需要自己定义它。

在Bootstrap 4和Bootstrap5中，这已更改为:

.d-print-none

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

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

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

如果Javascript干扰了单个元素的style属性，从而重写了!important，我建议在打印前和打印后处理事件。https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint

这里有一个简单的解决办法 放这个CSS

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

这是HTML

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