我一直在尝试从html文件生成pdf，并要求生成的pdf有页眉和页脚。它们必须打印在每一页上。在使用“静态”作为位置时，我确实让页眉/页脚打印在生成的每个页面上。但是，当我将表格添加到我的 html 时，我注意到该表格显示在第一页的页脚上方，而页眉不会打印在第二页上。我需要表格将自身调整到页脚上方，并在页脚之后的下一页中显示任何额外的行。
这是我的代码的框架，具有我需要的适当格式，仅供参考，报告页眉和页脚每个文档只生成一次，而且工作得很好。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Invoice</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 2px solid #ccc;
page-break-inside: avoid;
}
.page-header, .page-header-space,
.page-footer, .page-footer-space {
height: 100px;
}
.invoice-details {
margin-bottom: 10px;
}
.invoice-details p {
margin: 0;
}
.table-container {
page-break-inside: always;
}
.table {
width: 100%;
border-collapse: collapse;
max-height: 400px; /* or set a fixed height */
margin: 0 auto;
}
.table th,
.table td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
font-weight: bold;
}
.table th {
background-color: #999999;
font-weight: bold;
}
.table tr:nth-child(even) {
background-color: #d3d3d3;
}
.table tr:hover {
background-color: #ddd;
}
.total-container {
background-color: #444;
display: inline-block;
justify-content: flex-end;
color: #fff;
padding: 5px;
text-align: center;
margin-left: 60%;
}
.total {
display: flex;
justify-content: flex-end;
margin-top: 5px;
}
.total p {
font-weight: bold;
margin-left: 10px;
}
.report-header {
display: block;
justify-content: flex-center;
margin-bottom: 20px;
position: relative;
top: 0;
left: 0;
right: 0;
}
.report-header h1 {
font-size: 30px;
text-align: center;
margin: 0;
}
.report-header h2 {
font-size: 15px;
text-align: center;
margin: 0;
}
.report-header h3 {
font-size: 20px;
text-align: center;
font-weight: bold;
margin: 0;
}
.report-footer {
display: flex;
justify-content: center;
margin-top: 30px;
}
.report-footer p {
margin: 0;
}
.page-header {
position: fixed;
top: 0;
left: 0;
right: 0;
display: block;
justify-content: center;
margin-bottom: 30px;
}
.page-header h2 {
font-size: 20px;
text-align: center;
}
.page-header p {
margin: 20px;
}
.page-footer {
position: fixed;
bottom: 0;
left: 0;
right:0;
display: block;
justify-content: center;
margin-top: 20px;
}
.page-footer p {
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="report-header">
<h1>Company Primary Name</h1>
<h2>Company Address Line 1</h2>
<h2>Company Address Line 2</h2>
<h2>Company Address Line 3</h2>
<h2>Company Phone Number</h2>
</div>
<div class="page-header">
<h2>Tax Invoice</h2>
</div>
<div class="invoice-details">
<p>Invoice Date: May 1, 2023</p>
<p>Due Date: May 31, 2023</p>
</div>
<table class="table">
<thead><tr>
<div class="header-space"> </div>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>2</td>
<td>$10.00</td>
<td>$20.00</td>
</tr>
<tr>
<td>Item 2</td>
<td>1</td>
<td>$20.00</td>
<td>$20.00</td>
</tr>
<tr>
<td>Item 3</td>
<td>3</td>
<td>$5.00</td>
<td>$15.00</td>
</tr>
<tr>
<td>Item 3</td>
<td>3</td>
<td>$5.00</td>
<td>$15.00</td>
</tr>
<tr>
<td>Item 3</td>
<td>3</td>
<td>$5.00</td>
<td>$15.00</td>
</tr>
<tr>
<td>Item 3</td>
<td>3</td>
<td>$5.00</td>
<td>$15.00</td>
</tr>
<tr>
<td>Item 3</td>
<td>3</td>
<td>$5.00</td>
<td>$15.00</td>
</tr>
<tr>
<td>Item 3</td>
<td>3</td>
<td>$5.00</td>
<td>$15.00</td>
</tr>
<tr>
<td>Item 3</td>
<td>3</td>
<td>$5.00</td>
<td>$15.00</td>
</tr>
<tr>
<td>Item 3</td>
<td>3</td>
<td>$5.00</td>
<td>$15.00</td>
</tr>
<tr>
<td>Item 3</td>
<td>3</td>
<td>$5.00</td>
<td>$15.00</td>
</tr>
</tbody>
</table>
<div class="total-container">
<div class="total">
<p>Grand Total:</p>
<p>$100.00</p>
</div>
</div>
<div class="page-footer">
<p>Page Footer Text</p>
</div>
<div class="report-footer">
<p>Company Email</p>
</div>
</div>
</body>
</html>