Laravel Dompdf分页断点不生效 第9张地图跨页显示问题求助

核心问题排查 #

你代码里存在3个直接导致分页异常的问题：

1. CSS语法错误：.card的样式定义没有闭合大括号，导致后续分页相关的CSS规则完全不生效
2. 分页属性使用错误：page-break-inside: always是无效取值，避免元素内部分页的正确取值是avoid，且你把分页属性加在了display: none的隐藏元素上，规则不会触发
3. 布局兼容性问题：Dompdf对inline-block元素的分页边界计算存在已知缺陷，加上你使用了大量负margin，会导致元素位置计算偏移，出现提前/延迟分页的问题

修复步骤 #

1. 修正CSS规则 #

<style>
    .layout{
        width: 100%;
        margin-top: 10mm;
        margin-bottom: 0;
        margin-left: 25px;
    }
    .box {
        /* 替换inline-block为float，避免分页bug */
        float: left;
        width: 87mm;
        /* 移除所有负margin，用正间距调整位置，避免计算偏差 */
        margin: 0 5mm 5mm 0;
        padding-top: 15px;
        /* 禁止盒子内部被拆分 */
        page-break-inside: avoid;
    }
    p {
        text-align: right;
    }
    .card{
        width: 85mm;
        height: 55mm;
        border: 1px solid black;
    }
    /* 主动分页的元素样式 */
    .page-break {
        clear: both;
        page-break-after: always;
    }
</style>

2. 调整模板逻辑 #

<body class="layout">
@for( $i = 0; $i < 10 ; $i++)   
     <div class="box">
         <div class="card">
             ....
         </div>
     </div>

    @if($i % 2 == 1)
        <!-- 每行2个卡片后清除浮动 -->
        <div style="clear: both;"></div>
    @endif

    <!-- 按实际每页容纳量加主动分页，比如每页放8张就写$i%8==7 -->
    @if($i % 8 == 7)
        <div class="page-break"></div>
    @endif
@endfor
</body>

3. 可选优化配置 #

如果仍有偏移，可以在实例化Dompdf的时候指定纸张参数，避免默认参数偏差：

$pdf = PDF::loadView('index', $data)
    ->setPaper('a4', 'portrait')
    ->setOptions(['isHtml5ParserEnabled' => true, 'isRemoteEnabled' => true]);

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