内容与 PDF 第二页上的页眉重叠
Posted
技术标签:
【中文标题】内容与 PDF 第二页上的页眉重叠【英文标题】：Content overlapping with header on second page of PDF 【发布时间】：2020-10-28 01:33:49 【问题描述】：我正在使用具有动态内容的 Freemarker 生成 PDF。它可以是单页 PDF 或多页 PDF，具体取决于从外部资源获取的内容。 我目前面临的问题是多页场景。第二页的内容与页眉重叠。
.ftl 文件
<html>
<head>
<style>
<#include "customStyles.css"/>
@page
margin: 36px 36px 36px 36px;
size: landscape;
@top-center content: element(header)
#header position: running(header);
</style>
</head>
<body>
<div id="header">
<div class="headerText">Header Text</div>
<hr style="width: 100%"/>
</div>
<div class="content">
<#list fields?keys as key>
<label for="key">$key</label>
<span id="key">$fields[key]</span>
</#list>
</div>
</body>
</html>
customStyles.css 文件
#header
position: fixed;
width: 100%;
top: 0;
.headerText
font-size: 17px;
color: #000000;
hr
display: block;
height: 2px;
border: 0;
border-top: 2px solid #000000;
.content
margin-top: 20px;
page-break-inside: avoid;
pdf 的第一页完美显示，页眉位于页面顶部，其内容位于其下方。但是，当字段列表大得多以适合单个页面时，内容会与第二页上的标题重叠。
我已尝试从以前帖子中接受的答案中遵循以下方法。不幸的是，它们不适用于多页场景。
-
为主体添加了顶部填充。
body
padding-top: 50px;
-
为页眉提供了 40 像素的高度，但未按预期工作。
#header
position: fixed;
width: 100%;
top: 0;
height: 40px;
-
页面上边距增加。
@page
margin-top: 50mm;
P.S.：请不要将此问题作为重复问题关闭。我找不到任何可以正确显示内容而不在第二页上重叠的解决方案。
【问题讨论】：
【参考方案1】：您是否尝试过使用 z-index？
像这样使用它。
z-index: 1; 这是一个 CSS 标签。它的作用是停止重叠。它像层。当您使用 z-index 时，它会将其放在屏幕的顶层。
【讨论】：
添加 z-index 并没有停止与第二页上的标题重叠内容。以上是关于内容与 PDF 第二页上的页眉重叠的主要内容，如果未能解决你的问题，请参考以下文章