使用 HTML 生成的 pdf 第二页上的重叠标题
目标：为动态生成的 pdf 提供最多 8 厘米的边距，该文件在每一页上都有重复的页眉和页脚。
当前问题：虽然我能够为 pdf 提供边距并且内容在第一页上正确对齐，但是从第二页开始，正文的内容开始与页面头部，
第 2 页及以后 - 问题
它应该是什么样子
我的尝试： 在相关问题中尝试了解决方案，例如：- Content overlapping with header on second page of PDF 和 Table headers overlapping on second page when printing/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时才会重现，如果有其他第三方工具或其他任何方式可以达到目标，请随时分享。
谢谢！
2 个答案:
答案 0 :(得分：0)
主要问题似乎是您将“主要内容”放在一行中。
我设法通过类似于 this 的方式使其工作。
我还分别将页眉和页脚占位符移动到了 thead 和 tfoot。
此外，“@page{margin: 5cm;}”似乎打破了它，老实说我不知道为什么。
我不得不对代码进行了相当多的修改，但我希望它可以帮助您作为您想要实现的目标的模板。
这是我最终得到的代码：
<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 {
body {
margin: 0;
}
table {
page-break-inside: auto;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
}
</style>
</head>
<body>
<table style="padding: 0; margin: 0; width: 100%;">
<thead>
<tr><td>Header</td></tr>
<tr><td>Header</td></tr>
<tr><td>Header</td></tr>
<tr><td>Header</td></tr>
<tr><td>Header</td></tr>
<tr><td>Header</td></tr>
<tr><td>Header</td></tr>
<tr><td>Header</td></tr>
<tr><td>Header</td></tr>
<tr><td>Header</td></tr>
</thead>
<tbody class="page" style="color: green; font-weight: bold;">
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
<tr><td>Main content</td></tr>
</tbody>
<tfoot>
<tr><td>Footer</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>答案 1 :(得分：0)
在搜索了大量材料后，我终于得出结论，随着页边距的增加，可以赋予页眉的最大值，即 <thead> 减少。
例如
- 0cm 页边距 - 最大页眉高度可以是 250 像素
- 1 厘米页边距 - 最大页眉高度可以是 230 像素
等等。
.page-header,
.page-header-space {
height: 250px;
}要补充一点，给出的值不是严格的值，会根据您的用例而变化，但通过根据边距值改变标题大小，可以实现问题中给出的目标。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？