内容与PDF第二页上的页眉重叠

2022-05-30 00:00:00 pdf html css freemarker

我正在使用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;
}

为页眉提供了40px的高度，但未按预期工作。

#header {
  position: fixed;
  width: 100%;
  top: 0;
  height: 40px;
}

增加页面上边距。

 @page {
        margin-top: 50mm; 
}

附注：请不要重复结束此问题。我找不到在第二页上正确显示内容而不重叠的任何解决方案。

解决方案

您尝试过使用z索引吗？

这样使用它。

z指数：1；这是一个css标签。它所做的就是停止重叠。就像一层一层的。当您使用z-index时，它会将其放在屏幕的顶层。

相关文章