Laravel DOMPDF多页PDF中固定页眉页脚的实现方法

问题说明 #

在Laravel 9.52项目中使用dompdf/dompdf包将HTML内容转换为PDF时，当内容跨越多页，页眉和页脚仅在首页显示，后续页面无法重复固定显示，需要实现页眉页脚在每一页保持固定。

当前生成PDF的简化代码：

use Dompdf\Dompdf;
use Dompdf\Options;

public function generatePdf()
{
    $dompdf = new Dompdf();
    $options = new Options();
    $options->set('isHtml5ParserEnabled', true);
    $options->set('isPhpEnabled', true);
    $dompdf->setOptions($options);

    $html = view('pdf.template', compact('data'))->render();
    $dompdf->loadHtml($html);
    $dompdf->render();
    $dompdf->stream('document.pdf');
}

已尝试方案：

• 使用position: fixed设置页眉页脚
• 添加内边距/边距防止内容与页眉页脚重叠

可行解决方案 #

方案1：使用CSS Paged Media（@page规则） #

利用CSS分页媒体特性直接定义每页的页眉页脚，这是Dompdf官方推荐的稳定实现方式。

在pdf/template.blade.php中添加以下样式和结构：

<style>
/* 设置页面边距，为页眉页脚预留空间 */
@page {
    margin: 80px 25px;
    /* 定义页眉 */
    @top-center {
        content: "你的文档标题";
        font-size: 16px;
        font-weight: bold;
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 5px;
    }
    /* 定义页脚 */
    @bottom-center {
        content: "第 " counter(page) " 页 / 共 " counter(pages) " 页";
        font-size: 12px;
        border-top: 1px solid #e0e0e0;
        padding-top: 5px;
    }
}

/* 内容区域样式 */
.content {
    line-height: 1.6;
}
</style>

<div class="content">
    <!-- 你的动态内容示例 -->
    @foreach($data as $item)
        <h3>{{ $item->title }}</h3>
        <p>{{ $item->content }}</p>
        <!-- 手动添加分页符（可选，用于测试） -->
        <!-- <div style="page-break-after: always;"></div> -->
    @endforeach
</div>

方案2：优化position: fixed实现 #

如果偏好使用position: fixed，需确保HTML结构和样式配置正确，避免Dompdf渲染异常：

在pdf/template.blade.php中编写：

<style>
/* 设置页面边距，防止内容被页眉页脚遮挡 */
@page {
    margin: 80px 25px;
}

/* 固定页眉 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    padding: 10px 25px;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
}

/* 固定页脚 */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    padding: 10px 25px;
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    text-align: center;
    font-size: 12px;
}

/* 内容区域样式 */
.content {
    line-height: 1.6;
}
</style>

<div class="header">
    <!-- 页眉内容示例：Logo + 标题 -->
    <img src="{{ public_path('images/logo.png') }}" alt="Logo" style="height: 40px;">
    <h2 style="margin: 0;">文档标题</h2>
</div>

<div class="content">
    <!-- 你的动态内容 -->
    @foreach($data as $item)
        <p>{{ $item->content }}</p>
    @endforeach
</div>

<div class="footer">
    <!-- 自动生成页码 -->
    第 {PAGE_NUM} 页 / 共 {PAGE_COUNT} 页
</div>

额外注意事项 #

1. 确保Dompdf版本在0.8.0及以上，旧版本对CSS Paged Media的支持有限
2. 如果使用外部资源（如图片），需开启isRemoteEnabled选项（本地资源可忽略）：

$options->set('isRemoteEnabled', true);

3. 测试分页时可手动添加<div style="page-break-after: always;"></div>强制分页，验证页眉页脚是否重复显示

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