Laravel-Dompdf 中解决页码重叠问题的技术方案

在 Laravel 项目中使用 Dompdf 生成 PDF 文档时，页码显示是一个常见需求。本文将深入分析一个典型的页码重叠问题，并提供完整的解决方案。

问题现象分析

开发者在实现 PDF 分页显示时遇到了两个典型问题：

1. 页码重叠：第一页的页码显示出现"1"和"2"重叠的情况
2. 页码缺失：当移除固定定位样式后，第二页的页码完全不显示

这些问题通常与 DOM 结构布局和 Dompdf 的渲染机制有关。

核心解决方案

经过排查，问题的根本原因在于 HTML 文档结构中 <header> 和 <main> 标签的顺序问题。正确的做法应该是：

<main>
  <!-- 主要内容 -->
</main>

<header>
  <!-- 页眉内容 -->
</header>

技术实现细节

页码显示的正确实现

使用以下 PHP 脚本实现居中页码显示：

<script type="text/php">
    if (isset($pdf)) {
        $text = "page {PAGE_NUM} / {PAGE_COUNT}";
        $size = 10;
        $font = $fontMetrics->getFont("Verdana");
        $width = $fontMetrics->get_text_width($text, $font, $size) / 2;
        $x = ($pdf->get_width() - $width) / 2;
        $y = $pdf->get_height() - 35;
        $pdf->page_text($x, $y, $text, $font, $size);
    }
</script>

CSS 布局要点

对于固定位置的页眉，应使用以下样式：

header {
    position: fixed;
    top: 0;
    width: 100%;
}

深入理解问题原因

1. DOM 渲染顺序：Dompdf 按照 HTML 文档顺序渲染内容，错误的标签顺序会导致分页计算异常
2. 固定定位的影响：position: fixed 元素会被排除在常规文档流之外，可能影响分页计算
3. 页码计算时机：Dompdf 在渲染完成后才计算总页数，因此初始页面可能显示不完整

最佳实践建议

1. 保持简洁的文档结构，避免复杂的嵌套
2. 将固定定位元素放在文档末尾
3. 测试不同长度的内容以确保分页正确
4. 考虑使用 Dompdf 提供的原生页眉页脚功能作为替代方案

通过理解这些原理和解决方案，开发者可以避免常见的 PDF 生成问题，创建出专业水准的文档输出。