Laravel项目中CSS实现PDF每页顶部居中页眉/底部居中页脚的问题

核心思路是通过固定定位+内容容器边距补偿，让页眉页脚刚好嵌入@page预留的边距区域，同时保证动态内容不会侵入页眉页脚空间。

步骤1：配置打印样式与@page边距 #

在blade视图的<style>标签中设置专门的打印样式：

@media print {
    @page {
        /* 预留页眉页脚空间：上边距100px给页眉，下边距80px给页脚，左右边距按需调整 */
        margin: 100px 50px 80px 50px;
        size: A4;
    }

    body {
        margin: 0;
        padding: 0;
    }

    /* 页眉固定定位，完全嵌入@page上边距区域 */
    .pdf-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        /* 与@page左右边距对齐 */
        padding: 0 50px;
        height: 100px; /* 高度严格等于@page的上边距值 */
        background: #fff; /* 避免下方内容透过页眉显示 */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* 页脚固定定位，完全嵌入@page下边距区域 */
    .pdf-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0 50px;
        height: 80px; /* 高度严格等于@page的下边距值 */
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 内容容器自动避开页眉页脚区域 */
    .pdf-content {
        /* 无需额外上下边距，@page已预留足够空间 */
        padding: 20px 0;
    }

    /* 强制分页样式（可选，适配动态内容分页） */
    .page-break {
        page-break-after: always;
    }
}

/* 非打印环境下隐藏页眉页脚（可选） */
@media screen {
    .pdf-header, .pdf-footer {
        display: none;
    }
}

步骤2：Blade视图结构 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态PDF文档</title>
    <style>
        /* 插入上面的CSS代码 */
    </style>
</head>
<body>
    <!-- 页眉区域 -->
    <div class="pdf-header">
        <!-- 直接用asset生成图片绝对路径，无需转base64 -->
        <img src="{{ asset('images/header-logo.png') }}" alt="页眉Logo" style="height: 60px;">
        <h4>XX公司报表</h4>
    </div>

    <!-- 动态内容区域 -->
    <div class="pdf-content">
        @foreach($dynamicData as $item)
            <div class="content-item">
                <h5>{{ $item->title }}</h5>
                <p>{{ $item->content }}</p>
            </div>
            <!-- 每10条数据强制分页（示例） -->
            @if($loop->iteration % 10 == 0)
                <div class="page-break"></div>
            @endif
        @endforeach
    </div>

    <!-- 页脚区域 -->
    <div class="pdf-footer">
        <p>第<span class="pageNumber"></span>页 / 共<span class="totalPages"></span>页</p>
        <img src="{{ asset('images/footer-logo.png') }}" alt="页脚Logo" style="height: 40px; margin-left: 20px;">
    </div>
</body>
</html>

步骤3：Browsershot生成PDF代码 #

关闭自带的页眉页脚方法，开启背景显示解决透明图片截断问题：

use Spatie\Browsershot\Browsershot;

// 生成PDF
$pdf = Browsershot::html(view('pdf.dynamic-report', ['dynamicData' => $yourData]))
    ->showBackground() // 关键：解决透明背景图片打印截断问题
    ->format('A4')
    ->margins(0, 0, 0, 0) // 此处边距设为0，完全依赖@page控制
    ->save(storage_path('app/public/report.pdf'));

核心注意点 #

• 边距与高度严格对应：@page的margin-top必须等于.pdf-header的height，margin-bottom等于.pdf-footer的height，确保页眉页脚刚好填满预留区域，不会被挤压或移位。
• 背景色覆盖：给页眉页脚设置background: #fff，避免下方动态内容透过页眉页脚显示。
• 图片路径：使用asset()生成绝对URL，Browsershot可直接加载本地图片，无需转base64或SVG。

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