How do I hide an element when printing a web page?
我的网页上有一个链接可以打印该网页。 但是,该链接在打印输出本身中也是可见的。
单击打印链接时,是否存在会隐藏链接按钮的JavaScript或HTML代码?
例:
1 2 | "Good Evening" Print (click Here To Print) |
我要在打印文本" Good Evening"时隐藏该"打印"标签。"打印"标签不应显示在打印输出本身上。
在样式表中添加:
1 2 3 4 5 6 7 | @media print { .no-print, .no-print * { display: none !important; } } |
然后在您不想显示在打印版本(例如按钮)中的HTML中添加
最佳实践是使用专门用于打印的样式表,并将其
在其中,显示/隐藏要在纸上打印的元素。
1 | <link rel="stylesheet" type="text/css" href="print.css" media="print" /> |
Bootstrap 3为此具有自己的类:
1 | hidden-print |
定义如下:
1 2 3 4 5 | @media print { .hidden-print { display: none !important; } } |
您不必自己定义。
在Bootstrap 4中,它已更改为:
1 | .d-print-none |
这是一个简单的解决方案
把这个CSS
1 2 3 4 5 6 | <style> @media print{ .noprint{ display:none; } } |
这是HTML
1 2 3 4 | element that need to be hidden when printing element that need to be hidden when printing |
CSS文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | @media print { #pager, form, .no-print { display: none !important; height: 0; } .no-print, .no-print *{ display: none !important; height: 0; } } |
HTML标题
1 | <link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css"> |
元件
1 |
您可以将链接放置在div中,然后在锚点标记上使用JavaScript来在单击时隐藏div。示例(未经测试,可能需要调整,但您明白了):
1 2 3 4 5 | <a href="javascript:void();" onclick="document.getElementById('printOption').style.visibility = 'hidden'; document.print(); return true;"> |
缺点是,一旦单击该按钮,该按钮就会消失,并且在页面上将丢失该选项(尽管始终为Ctrl + P)。
更好的解决方案是创建一个打印样式表,并在该样式表中指定
最好的办法是创建页面的"仅打印"版本。
哦,等等...这已经不是1999年了。使用带有"显示:无"的打印CSS。
1 2 3 4 5 | @media print { .no-print { visibility: hidden; } } |
1 2 3 4 5 | Nope Yup |
狄奥多斯接受的答案对我们中的某些人(即使不是所有人)也不起作用。
我仍然无法隐藏我的"打印此按钮"以免出现在纸上。
克林特·帕克(Clint Pachl)通过添加对css文件进行的少量调整
1 | media="screen, print" |
而不仅仅是
1 | media="screen" |
正在解决这个问题。因此,为了清楚起见,并且因为不容易看到Clint Pachl在注释中隐藏了其他帮助。
用户应在css文件中包含所需格式的",print"。
1 | <link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css"> |
而不是仅默认媒体="屏幕"。
1 | <link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css"> |
我认为可以为每个人解决这个问题。
如果您的Java语言会干扰单个元素的样式属性,从而覆盖了