我正在使用飞碟R8生成PDF文件。 PDF需要一个标题,该标题将在每页上重复。标题将由用户指定,因此我无法确定其高度。我设法使标头在每一页上重复,但是问题是,如果标头具有多于一行的文本,它不会动态地重新调整正文的高度,最终会使其重叠。这是我的代码:
<!DOCTYPE html>
<html>
<head>
<style>
@page {
size: 4.18in 6.88in;
margin: 0.25in;
@top-center {content: element(header);}
}
#header {
color: red;
display: block;
position: running(header);
}
</style>
</head>
<body>
<div id="header">
<-- Lots of text here -->
</div>
<div class="section">
<-- Lots of text here -->
</div>
</body>
</html>
[用飞碟生成后,生成的PDF看起来像这样:
<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS8yYU9jdC5wbmcifQ==” alt =“在此处输入图像描述”>
任何人都可以帮助我找到一种解决方案,使我的标头不与身体的其余部分重叠吗?
[如果其他人遇到此问题,我设法找到解决方法。要动态计算PDF中标头的大小,请忽略CSS运行标头,而是将整个页面设置为HTML表,然后将标头放入thead
部分。使用以下CSS规则在每个页面上重复thead
:
table {
-fs-table-paginate: paginate;
}
只需尝试通过CSS将边距/填充添加到<div class="section"></div>
。这应该可以解决问题。
页眉重叠,因为页眉并未与页面上的所有其他元素一起放置。在打印模式下,会以特殊方式处理running element。因此,如果这些元素出现在页面上的任何位置,则必须确保有足够的空间。
[如果其他人遇到相同的问题,我找到了一个对我有用的解决方案。
页眉和页脚在页边距内建立。因此解决方案是增加页面的上边距,例如:
@page {
margin-top: 50mm;
}
此解决方案是从以下答案中复制的:https://stackoverflow.com/a/31470840/1271573