使用Dompdf生成含动态表格PDF时，如何实现每页重复固定页眉页脚？

我之前在项目里用Dompdf生成带分页表格的PDF时，也踩过页眉页脚不重复、显示不稳定的坑，给你几个实测有效的解决方法：

1. 修正CSS定位与页面边距设置 #

Dompdf对position: fixed元素的渲染依赖页面边距，你之前的设置缺少了关键的页面边距定义，导致页眉页脚要么被内容覆盖，要么位置错乱。

首先添加页面边距规则，给页眉页脚预留足够空间：

@page {
    margin: 100px 20px; /* 上下边距要大于页眉/页脚的高度，左右按需调整 */
}

然后重新定义页眉和页脚的定位：

.header {
    position: fixed;
    top: 0; /* 固定在页面顶部，对应@page的上边距 */
    left: 0;
    right: 0;
    height: 80px; /* 根据你的页眉图片实际高度调整 */
    text-align: center; /* 让图片居中显示 */
}

.footer {
    position: fixed;
    bottom: 0; /* 固定在页面底部，对应@page的下边距 */
    left: 0;
    right: 0;
    height: 60px; /* 根据页脚图片实际高度调整 */
    text-align: center;
}

2. 移除错误的表格分页规则 #

你之前加的table td{page-break-after: always;}会强制每个单元格都分页，这是导致页脚显示不稳定的核心原因之一，直接删掉这条规则！

如果需要优化表格分页体验，可以给tbody添加规则，避免表格行被拆分到两页：

tbody tr {
    page-break-inside: avoid; /* 尽量避免在表格行中间分页 */
}

3. 调整HTML结构，确保层级正确 #

把页眉和页脚放在内容的最外层，避免被其他容器的样式（比如overflow、定位）影响，示例结构如下：

<body>
    <!-- 页眉 -->
    <div class="header">
        <img src="<?php echo base_url()?>public/images/alhamed.jpg" style="width: 90%;"> <!-- 用百分比宽度适配页面，比固定700px更灵活 -->
    </div>

    <!-- 主体内容 -->
    <div class="container-fluid">
        <div class="card-body">
            <div class="table-responsive-sm">
                <table class="table table-striped">
                    <thead class="thead-default">
                        <tr>
                            <th class="text-center"> # </th>
                            <th> Product </th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php for($j=0;$j<40;$j++) { ?>
                        <tr>
                            <td><?php echo $j+1; ?></td>
                            <td>Product <?php echo $j+1; ?></td>
                        </tr>
                        <?php } ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="footer">
        <img src="<?php echo base_url()?>public/images/footer.jpg" style="width: 90%;">
    </div>
</body>

4. 额外注意事项 #

• 图片路径：确保Dompdf能正确加载图片，建议使用绝对路径，或者在Dompdf配置中设置base_url参数，避免图片加载失败导致页眉页脚空白。
• Dompdf版本：旧版本对position: fixed的支持有缺陷，建议升级到最新稳定版（比如2.x系列）。
• 测试分页：生成多页数据测试，确认页眉页脚在每一页都正常显示，且内容不会覆盖页眉页脚区域。

内容的提问来源于stack exchange，提问作者akku