[英]How do I hide the navbar when trying to print the page
I am working on an application for school and made an invoice sheet that has a print option.我正在申请学校并制作了一张带有打印选项的发票。 When I click the button or do ctrl+p it shows the navbar in a very disorganized way.
当我单击按钮或执行 ctrl+p 时,它会以非常混乱的方式显示导航栏。 How would I hide the navbar completely?
我将如何完全隐藏导航栏?
This is an image how of it currently displays on the print screen.这是它当前如何在打印屏幕上显示的图像。 https://gyazo.com/9aeb5270764e8c9051a3bd78e2c42efb
https://gyazo.com/9aeb5270764e8c9051a3bd78e2c42efb
I have tried using @media print with #navbar { display: none;我曾尝试将 @media print 与 #navbar { display: none; 一起使用。 and it still shows it.
它仍然显示它。 I could be just using it incorrectly.
我可能只是错误地使用它。 Also messing with the css styles to see if anything can be done, but I cannot figure it out.
还弄乱了 css 样式以查看是否可以完成任何操作,但我无法弄清楚。 It doesn't show below because it didn't work for me.
它没有显示在下面,因为它对我不起作用。
This is the css code for that page.这是该页面的 css 代码。
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
font-size: 16px;
line-height: 24px;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(n + 2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td {
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.item input {
padding-left: 5px;
}
.invoice-box table tr.item td:first-child input {
margin-left: -5px;
width: 100%;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
.invoice-box input[type="number"] {
width: 60px;
}
@media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
/** RTL Stuff **/
.rtl {
direction: rtl;
font-family: Tahoma, "Helvetica Neue", "Helvetica", Helvetica, Arial,
sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
This is the button code and method这是按钮代码和方法
printWindow: function () {
window.print();
}
<button class ='btn' @click='printWindow()'>Print Invoice</button>
I just need it to not show on this page.我只需要它不显示在此页面上。 Also if possible for the buttons to not show as well.
如果可能的话,按钮也不会显示。
EDIT: I changed @media to how it was originally编辑:我把@media 改成了原来的样子
There's an error in your @media
query.您的
@media
查询中存在错误。 You forgot to add in the and
keyword.您忘记添加
and
关键字。 So here's what your media query should look like:因此,您的媒体查询应如下所示:
@media print and (max-width: 600px){
// your styles go here
}
All your styles should now be correctly applied.现在应该正确应用所有样式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.