[英]Unable To Remove header from First page?
我正在尝试在打印时仅从第一页删除 header,或将其保存到 PDF 但它不起作用我尝试了以下 CSS 的答案代码,但没有一个主题的答案代码也访问过,但没有一个是有效的链接: worked for me Remove Header from First Page of HTML Generated PDF - CSS and Delete the footer only on the last page using CSS
@page: first {
@top-left {
content: normal;
}
}
@page :not(:first) {
}
两个主题都不起作用。
我的 styles
<style type="text/css">
.page-header,
.page-header-space {
height: 100px;
}
.page-footer,
.page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black;
/* for demo */
background: white;
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black;
/* for demo */
background: white;
/* for demo */
}
.page {
page-break-after: always;
}
@page {
margin: 10mm;
}
@media print {
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
button {
display: none;
}
body {
margin: 0;
}
@page: first {
@top-left {
content: normal;
}
}
.main_paragraph {
white-space: pre-line;
white-space: pre-wrap;
line-height: 25px;
font-size: 16px;
margin-right: 10px;
margin-left: 10px;
text-indent: 30px;
text-align: justify
}
</style>
我的身体
<body>
<div class="page-header" style="text-align: center">
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div>
<img src="{{URL::asset("img/logo.jpg")}}" style="width: 90%;display: block;margin: 0 auto;z-index: 1;">
</div>
<table id="main_table" dir="rtl"
style="width: 95%;text-align:center; margin: 0 auto;border-collapse: collapse;" border="1">
<tbody>
<tr style="font-size: 18px;font-weight:bold;height:40px">
<td style="width: 47.5%">sugestion</td>
<td style="width: 7%">date</td>
<td style="width: 46.5%">order</td>
</tr>
<tr>
<td style="border-bottom: hidden;text-align:right">
<p style="text-align: right;font-size: 19px;margin-right:30px;font-weight:bold">
{{$result[0]->name}}</p>
</td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
{{-- <td>{{strlen($result[0]->document_text)}}
</td> --}}
@if(strlen($result[0]->document_text)<=977) <td style="vertical-align: top;border-top:hidden;height:65vh"
dir="rtl">
@else
<td style="vertical-align: top;border-top:hidden;" dir="rtl">
@endif
{{$result[0]->document_text}}
<p class="main_paragraph" dir="rtl" lang="ar">{{$result[0]->document_text}}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
<div class="page-footer" style="text-align: center;width:94.5%;margin-left:2.55%">
</div>
</body>
我正在chrome上测试它。
您可以在 CSS 中使用媒体查询来解决该问题
媒体查询用于在打印 web 页面时隐藏元素。 使用@media print 查询并将显示不显示或隐藏到需要在打印时隐藏的元素的可见性
像这样
@media print{
.page-header{
display:none;
}
}
如果这对您不起作用,请尝试在 HTML 页面上添加media = print
链接
像这样
<link rel="stylesheet" href="style.css" type="text/css" media="print" />
如果仍然不起作用,请尝试将 CSS 代码添加到 HTML 页面
像这样
<style>
@media print{
.page-header{
display:none;
}
}
</style>
尝试使用 Laravel
<div class="header
@if(Route::currentRouteName() === 'yourPage')
{{hied-in-print}}
@endif "></div>
并在@media print
<style>
@media print{
.hied-in-print{
display:none;
}
}
</style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.