问题描述
我试图在打印时仅从第一页删除标题, 或将其保存为 PDF 但它不起作用 我尝试了以下 CSS 代码,但没有一个主题有效: 我也访问过这些链接,但没有一个答案对我有用 Remove Header from First Page of HTML Generated PDF - CSS 和Delete the footer only on the last page using CSS
@page: first {
@top-left {
content: normal;
}
}
@page :not(:first) {
}
两个主题都不起作用。
我的风格
<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 中使用媒体查询来解决这个问题
媒体查询用于在打印网页时隐藏元素。使用@media 打印查询并将display none 或visibility hidden 设置为需要在打印时隐藏的元素
像这样
@media print{
.page-header{
display:none;
}
}
如果这对您不起作用,请尝试在 HTML 页面上添加 media = print
链接
喜欢这个
<link rel="stylesheet" href="style.css" type="text/css" media="print" />
如果还是不行,请尝试在 HTML 页面中添加 CSS 代码
喜欢这个
<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>