我有一个链接在我的网页打印网页。但是，在打印输出本身中也可以看到该链接。
是否有javascript或HTML代码，将隐藏链接按钮时，我点击打印链接?
例子:
"Good Evening"
Print (click Here To Print)
我想在打印文本“Good Evening”时隐藏这个“Print”标签。“打印”标签不应该显示在打印输出本身上。
当前回答
这里有一个简单的解决办法 放这个CSS
@media print{
.noprint{
display:none;
}
}
这是HTML
<div class="noprint">
element that need to be hidden when printing
</div>
其他回答
这里有一个简单的解决办法 放这个CSS
@media print{
.noprint{
display:none;
}
}
这是HTML
<div class="noprint">
element that need to be hidden when printing
</div>
正如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
});
Bootstrap 3有自己的类，叫做:
hidden-print
它的定义如下:
@media print {
.hidden-print {
display: none !important;
}
}
你不需要自己定义它。
在Bootstrap 4和Bootstrap5中，这已更改为:
.d-print-none
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>
最好的方法是创建页面的“仅打印”版本。
哦,等等…现在已经不是1999年了。使用带有“display: none”的打印CSS。
