@media print { .no-print { 可见性:隐藏; ｝ ｝ < div class = " no-print”> 不 < / div > < div > 是的 < / div >

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

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

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

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

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

正如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
});

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>

@media print { .no-print { 可见性:隐藏; ｝ ｝ < div class = " no-print”> 不 < / div > < div > 是的 < / div >