我正在用HTML构建一个发票报告模板，并使用Weasyprint将其生成为PDF(最终生成为docx(
我遇到的问题是，不仅无法分页，而且无法正确生成运行的页眉和页脚，而不会使正文内容重叠，并将我的数据转换为Zalgo文本。
我的报告模板的格式很简单：
+==========================+
+ Header +
+==========================+
+ Body +
+==========================+
+ Footer +
+==========================+
页眉和页脚或多或少都会在页面上流行起来。页眉包含一个页面计数器，而页脚将仅在最后一页显示文本框内的值。
为了多功能性，我的页眉和页脚都被引用到单独的HTML模板中，使用include关键字将它们包括在内。由于这是发票的模板，所以页眉更类似于信头。
主要内容将在正文中。如果内容太多，它将中断并继续到下一页。
对于所有这三个部分，我使用表格进行格式化，主要是为了保持数据的一致性。
以下是我的HTML主体示例：
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">
@page {
size: A4 portrait; /* can use also 'landscape' for orientation */
margin: 1cm;
@top-left{
content: element(header);
}
@bottom-left{
content: element(footer);
}
}
header, footer, .body_content{
font-size: 12px;
/* color: #000; */
font-family: Arial;
width: 100%;
position: relative;
}
header {
/*position: fixed;*/
/*position: running(header); */
/*display: block; */
}
footer {
position: fixed;
/*position: running(footer);*/
/*position: absolute;*/
bottom: 0;
/*display: block;*/
}
.body_content {
position: relative;
page-break-inside: auto;
height: 320pt;
/*overflow: hidden;*/
}
</style>
</head>
<body>
<header>
{% include 'sampleTemplate_header.html' %}
</header>
<div >
<table class="body_content">
<tbody >
<tr style="padding-top:5px;" >
<td style="width:60%;" >
</td>
<td style="width:10%;" >
</td>
<td style="width:15%;" >
</td>
<td style="width:15%;" >
</td>
</tr>
<tr>
</tr>
<tr >
<td style="width:60%;" >
</td>
<td style="width:10%;" >
</td>
<td style="width:15%;" align="right" >
</td>
<td style="width:15%;" align="center" >
</td>
</tr>
<tr >
<td style="width:60%;" id="testCell" >
</td>
<td style="width:10%;" >
</td>
<td style="width:15%;" >
</td>
<td style="width:15%;" >
</td>
</tr>
</tbody>
</table>
</div>
<footer>
{% include 'sampleTemplate_footer.html' %}
</footer>
</body>
</html>
由于我对布局的尝试，CSS部分有很多注释代码，但尽管我做了很多更改，我似乎无法获得所需的布局。
我最常见的问题之一是正文内容的文本与页眉或页脚重叠。尽管强制page-break-after，但后面的情况甚至会发生。
我让它与运行中的元素一起工作(我在这里读到了它：https://www.w3.org/TR/css-gcpm-3/#running-元素(。
如果你把页脚放在主要内容之前，那么它会显示在每一页上。运行元素显然会将一个元素从主流移到边距中，所以我想如果它还不在页面中，它就无法将其移到边距。
为了使页眉/页脚不再与内容重叠，我不得不使用@page的margin值。由于运行元素会将元素移动到边距中，因此使边距变大会给它更多的空间。在下面的示例中，如果减小上(或下(边距的值，则页眉(或页脚(将重叠。
有时，我必须设置页眉/页脚height值，以使其正确地位于页边空白中，但在本例中我不必这样做。
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">
@page {
size: A4 portrait; /* can use also 'landscape' for orientation */
margin: 100px 1cm 150px 1cm;
@top-left{
content: element(header);
}
@bottom-left{
content: element(footer);
}
}
header {
position: running(header);
/*height: 100px;*/
}
footer {
position: running(footer);
/*height: 150px;*/
}
</style>
</head>
<body>
<header>
multiline<br>header<br>lots<br>of<br>lines<br>here<br>
</header>
<footer>
multiline<br>footer<br>lots<br>of<br>lines<br>here
</footer>
<div >
stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff<br>stuff
</div>
</body>
</html>