Question

我正在使用具有动态内容的 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; 
}

P.S .：请不要重复填写此问题。我找不到任何可以正确显示内容而不在第二页上重叠的解决方案。

Answer 1

您是否尝试过使用z-index？

像这样使用它。

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

内容与PDF第二页的标题重叠

1 个答案: