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

小开

您可以将链接放在一个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属性指定第二个样式表。

小开

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

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

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

小开

在样式表中添加:

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

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

小开

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

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

小开

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>

小开

引导3有它的拥有类被称为:

hidden-print

它的定义如下:

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

你不需要自己定义它。

在引导4和Bootstrap5中，更改为:

.d-print-none

小开

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

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

这是HTML

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

小开

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

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


<div>
Yup
</div>

小开

diodus所接受的答案对我们中的一些人(如果不是所有人的话)不起作用。

.

克林特Pachl通过添加调用css文件的小调整

      media="screen, print"

不仅仅是

      media="screen"

正在解决这个问题。所以为了清晰起见，因为不容易看到克林特·帕切尔在评论中隐藏了额外的帮助。用户应该在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">

我认为这解决了所有人的问题。

小开

如果Javascript干扰了单个元素的样式属性，从而覆盖了!important，我建议处理onbeforeprint和onafterprint事件。# EYZ3

小开

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