我的网页上有一个链接,可以打印网页。然而,这个链接在打印出来的文件中也是可见的。
是否有javascript或HTML代码可以在我点击打印链接时隐藏链接按钮?
例子。
"Good Evening"
Print (click Here To Print)
我想在打印文本"Good Evening"时隐藏这个"Print"标签。这个"打印"标签不应该显示在打印输出本身。
在你的样式表中添加。
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}
然后在你的HTML中添加class='no-print'
(或将no-print类添加到现有的类声明中),你不希望在印刷版中出现,例如你的按钮。
最好的做法是使用专门用于打印的样式表,并将其媒体
属性设置为打印
。
在其中,显示/隐藏你想打印在纸上的元素。
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Bootstrap 3有[它的自带的类][1]调用。
hidden-print
它的定义是这样的。
@media print {
.hidden-print {
display: none !important;
}
}
你不必自己定义它。
在[Bootstrap 4][2]中,这句话被改为:
.d-print-none
。
.d-print-none
[1]: https://getbootstrap.com/docs/3.3/css/#responsive-utilities-print [2]: https://getbootstrap.com/docs/4.3/utilities/display/#display-in-print
这里有一个简单的解决方案 放这个CSS
<style>
@media print{
.noprint{
display:none;
}
}
而这里是HTML
<div class="noprint">
element that need to be hidden when printing
</div>
<div class="noprint">
element that need to be hidden when printing
</div>
CSS文件
@media print
{
#pager,
form,
.no-print
{
display: none !important;
height: 0;
}
.no-print, .no-print *{
display: none !important;
height: 0;
}
}
HTML HEADER
<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >
ELEMENT
<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的head部分这样做,并指定第二个带有媒体属性的样式表。
diodus所接受的答案对我们中的一些人来说是无效的,如果不是所有的人。 我不能仍然隐藏我的打印这个按钮从出去到纸上。
Clint Pachl对css文件的调用进行了小小的调整,增加了以下内容
media="screen, print"
而不仅仅
media="screen"
正在解决这个问题。 因此,为了清楚起见,并且因为不容易看到Clint Pachl在评论中隐藏的额外帮助。 用户应该将",print" 在css文件中加入所需的格式。
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">
而不是默认的媒体="屏幕"。 只。
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">
这我想为大家解决了这个问题。
如果你的Javascript干扰了单个元素的样式属性,从而覆盖了!重要
,我建议处理onbeforeprint
和onafterprint
事件。
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint