Question

我正在尝试使用Dompdf库以pdf格式生成报告。我添加了一个带有此代码的页眉和页脚

.footer {
    position: fixed;
    bottom: 0px;
    height: 30px;
    background-color: #333399;
}
.header {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 116px;
    background: url('http://ibadep.local/img/header2.png') no-repeat;
}

它们在所有页面上都正确显示。

在页面内部，我有一个显示大量信息的表（一个php foreach），当表变得非常大时，trs出现在第一页的页脚后面，标题为第2页。我不希望这样，我希望当tr到达页脚附近时，页面会被打破，下一行显示标题，而不是像现在发生的那样。

我已尝试使用page-break-before和page-break-after属性进行了很多操作，但这些都没有效果。我该怎么办???

Answer 1

您需要设置页边距。这将阻止页面内容在为页眉和页脚分配的空间中呈现。

@page { 
    margin: 120px 50px 35px 50px; 
}

您还需要将top上的header设置为负值，以将元素推到边距之外。这同样适用于页脚。

top: -90px

您可以将以下代码粘贴到DOMPDF Demo

中进行测试

<html>
<head>
<style>
@page {
    margin: 120px 50px 80px 50px; 
}
#footer {
    position: fixed;
    bottom: -50px;
    height: 30px;
    background-color: #333399;
}
#header {
    position: fixed;
    top: -100px;
    width: 100%;
    height: 116px;
    background: url('http://ibadep.local/img/header2.png') no-repeat;
}
/* Type some style rules here */

</style>
</head>

<body>
<div id="header">
    This is the header
</div>
<div id="footer">
    This is the footer
</div>

<table>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
<tr>
<td>Column1</td><td>Column2</td><td>Column3</td>
</tr>
</table>
<!-- Type some HTML here -->

</body>
</html>

在css和pdf中添加分页符

1 个答案: