在CSS和pdf中添加分页符

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出现在第一页的页脚和第二页的页眉的后面。 我不想要这个，我想要当tr到达页脚附近时，页面被打破，下一行在页眉下方显示标题，而不是像现在这样在后面显示。

我已经使用page-break-before和page-break-after属性尝试了很多事情，但是没有一个起作用。 我能做什么？？？

Answer 1

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

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

您还需要将header的top设置为负值，以将元素推到边距之外。 页脚也是如此。

top: -90px

您可以通过将以下代码粘贴到DOMPDF演示中进行测试

<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 个解决方案

解决方案1
1 已采纳 2013-07-30 19:42:56

在CSS和pdf中添加分页符

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-07-30 19:42:56

解决方案1
1 已采纳 2013-07-30 19:42:56