Laravel中使用dompdf结合视图添加页码的方法

云原生阿岚

2026-5-20

嘿，我来帮你搞定dompdf添加页码的问题！其实用Blade视图配合dompdf的CSS计数器就能轻松实现“第X页，共Y页”的效果，具体步骤如下：

1. 在你的Blade视图中添加页码样式和元素

打开你用来生成PDF的视图文件file-pdf.blade.php，在顶部插入自定义CSS样式和页眉/页脚容器：

<style>
/* 设置页面边距，给页眉页脚留出显示空间 */
@page {
    margin: 80px 20px;
}

/* 页脚样式，用来放置页码 */
.footer {
    position: fixed;
    bottom: -60px;
    left: 0;
    right: 0;
    height: 50px;
    text-align: center;
    font-size: 14px;
    color: #666;
}

/* 利用dompdf内置计数器生成页码内容 */
.page-number:before {
    content: "第 " counter(page) " 页，共 " counter(pages) " 页";
}
</style>

<!-- 页脚容器，承载页码 -->
<div class="footer">
    <span class="page-number"></span>
</div>

<!-- 你的原有PDF内容区域 -->
<div class="content">
    {{-- 这里放你原来的视图内容，比如输出$data里的变量 --}}
    {!! $data['content'] !!}
</div>

如果需要同时添加页眉内容，比如文档标题，可以再加一个页眉容器：

<style>
/* 追加页眉样式 */
.header {
    position: fixed;
    top: -60px;
    left: 0;
    right: 0;
    height: 50px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}
</style>

<!-- 页眉容器 -->
<div class="header">
    你的文档标题
</div>

2. 确保dompdf配置兼容

如果你用的是barryvdh/laravel-dompdf包，生成PDF时可以开启HTML5解析器（默认可能已开启，设置后更稳妥）：

$pdf = PDF::loadView('file-pdf', $data)
    ->setOptions([
        'isHtml5ParserEnabled' => true,
        'isRemoteEnabled' => true, // 视图中有远程图片时需要开启
    ]);

return $pdf->download('filename.pdf');