使用 HTML 生成的 pdf 第二页上的重叠标题
Nik*_*ngh 6 html css pdf bootstrap-4
目标：为动态生成的 pdf 提供高达 8 厘米的边距，该pdf 在每一页上都有重复的页眉和页脚。
当前问题：虽然我能够为 pdf 提供边距并且内容在第一页上正确对齐，但是从第二页开始，正文的内容开始与页面的标题重叠，
第 2 页及以后 - 问题
它应该是什么样子
我的尝试： 尝试像相关问题的解决方案： - 与PDF的第二页页眉内容重叠和表头重叠的第二页上打印时/ PDF等之辈，但他们都不是工作。
代码：-
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
<title>Document</title>
<style>
/* Styles go here */
@media print {
* {
-webkit-print-color-adjust: exact !important;
}
}
* {
font-family: "Mulish", sans-serif;
}
.section-padding {
padding-bottom: 20px;
}
.table > :not(:last-child) > :last-child > * {
border-bottom-color: inherit;
}
strong {
font-weight: 700 !important;
}
.page-header,
.page-header-space {
height: 250px;
}
.page-footer,
.page-footer-space {
height: 100px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
}
.page {
page-break-after: always;
}
@page {
margin: 5cm;
}
@media print {
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
body {
margin: 0;
}
table {
page-break-inside: auto;
}
tr,
div {
page-break-inside: avoid;
page-break-after: auto;
}
}
</style>
</head>
<body>
<div class="page-header">
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
</div>
<div class="page-footer">
Footer
</div>
<table style="padding: 0; margin: 0; width: 100%;">
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="page" style="color: green; font-weight: bold;">
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
crossorigin="anonymous"
></script>
</body>
</html>PS：此问题只有在边距超过1.5cm的值时才会重现，如果有其他第三方工具或任何其他方式可以实现目标，请随时分享。
谢谢！
经过大量资料搜索后，最后我可以得出这样的结论：随着页边距的增加，可以赋予页眉的最大值即<thead>减少。
例如，
- 0 厘米页边距 - 最大标题高度可为 250 像素
- 1 厘米页边距 - 最大标题高度可为 230 像素
等等。
.page-header,
.page-header-space {
height: 250px;
}需要补充的一点是，给出的值不是严格的值，会根据您的用例而变化，但通过根据边距值改变标头大小，可以实现问题中给出的目标。