我的网页上有一个链接可以打印该网页。但是,该链接在打印输出本身中也是可见的。
单击打印链接时,是否存在会隐藏链接按钮的JavaScript或HTML代码?
例:
"Good Evening"
Print (click Here To Print)
我要在打印文本“ Good Evening”时隐藏该“打印”标签。“打印”标签不应显示在打印输出本身上。
我的网页上有一个链接可以打印该网页。但是,该链接在打印输出本身中也是可见的。
单击打印链接时,是否存在会隐藏链接按钮的JavaScript或HTML代码?
例:
"Good Evening"
Print (click Here To Print)
我要在打印文本“ Good Evening”时隐藏该“打印”标签。“打印”标签不应显示在打印输出本身上。
狄奥多斯接受的答案对我们中的某些人(如果不是所有人)都无效。我仍然无法隐藏我的“打印此按钮”以免出现在纸上。
克林特·帕克(Clint Pachl)通过添加对CSS文件的调用进行了一些小的调整
media="screen, print"
而不仅仅是
media="screen"
正在解决这个问题。因此,为了清楚起见,并且因为不容易看到Clint Pachl在注释中隐藏了其他帮助。用户应在css文件中包含所需格式的“,print”。
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">
而不是仅默认媒体=“ screen”。
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">
我认为可以为每个人解决这个问题。
最好的办法是创建页面的“仅打印”版本。
哦,等等...这已经不是1999年了。使用带有“显示:无”的打印CSS。
@media print {
.no-print {
visibility: hidden;
}
}
<div class="no-print">
Nope
</div>
<div>
Yup
</div>
这是放置此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>
最佳实践是使用专门用于打印的样式表,并将其media
属性设置为print
。
在其中,显示/隐藏要在纸上打印的元素。
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
引导3有其自己的这个类叫做:
hidden-print
定义如下:
@media print {
.hidden-print {
display: none !important;
}
}
您不必自己定义。
在Bootstrap 4中,它已更改为:
.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>
如果您的Java语言会干扰单个元素的style属性,因此会被覆盖
!important
,则建议您处理事件onbeforeprint
和onafterprint
。https://developer.mozilla.org/zh-CN/docs/Web/API/WindowEventHandlers/onbeforeprint