Laravel Blade打印预览循环数据排版：同页多列填充自动换页设置

核心调整逻辑 #

• 移除原有基于table做整体布局的结构，替换为打印友好的块级布局，解决表格单元格作为大尺寸内容容器时的分页错位问题
• 新增@page打印规则，固定页面尺寸、边距，让浏览器可精准计算每页可用的内容高度，自动触发分页
• 给多列布局补充打印兼容的分页属性，保证跨页时自动延续三列排版逻辑，不会出现单块内容溢出打乱列结构的问题
• 给单个列表项添加禁止跨页拆分规则，避免单条善信记录被截断到两页
• 移除之前靠margin硬凑三列间距的写法，直接用column-gap控制列间距，保证每列宽度均匀，不会出现内容偏移

修正后的完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
    <title>打印名单</title>
    <style>
        /* 全局盒模型重置，避免宽度计算偏差 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 打印页面基础设置 */
        @page {
            size: A4;
            margin: 20mm;
        }
        body {
            font-family: "Microsoft Yahei", sans-serif;
        }
        /* 页眉部分，跨页时自动在每一页顶部重复 */
        .report-header {
            text-align: center;
            margin-bottom: 15px;
        }
        .report-header hr {
            border: 1px solid #000;
            margin: 10px 0;
        }
        .header-title-group {
            display: flex;
            justify-content: space-around;
            margin-top: 10px;
            font-size: 20px;
            font-weight: bold;
        }
        /* 三列内容区核心设置 */
        .report-content {
            column-count: 3;
            column-gap: 40px;
            line-height: 2.5;
            font-size: 20px;
            /* 多列布局分页兼容设置 */
            column-fill: auto;
            orphans: 2;
            widows: 2;
        }
        /* 单条列表项禁止跨页拆分 */
        .report-content li {
            break-inside: avoid;
            list-style: none;
        }
        /* 打印场景下的兼容规则 */
        @media print {
            .report-header {
                position: fixed;
                top: 0;
            }
            .report-content {
                margin-top: 60px;
            }
        }
    </style>
</head>
<body>
    <!-- 页眉 -->
    <div class="report-header">
        <h4>
            <img src="https://scontent.fmkz1-1.fna.fbcdn.net/v/t31.0-8/o.jpg?_nc_cat=111&ccb=2&_nc_sid=09cbfe&_nc_ohc=gLnsAI4ON1MAX98YpzP&_nc_ht=scontent.fmkz1-1.fna&oh=bacd1bd15cf7a118af57abe52bf7e07e&oe=5FFAAEC0" alt="标识" style="width:60px; vertical-align: middle;">
            柔佛古庙许愿灯登记名单（{{$year}}年）
        </h4>
        <hr>
        <div class="header-title-group">
            <span>善信编号&nbsp;&nbsp;名字</span>
            <span>善信编号&nbsp;&nbsp;名字</span>
            <span>善信编号&nbsp;&nbsp;名字</span>
        </div>
    </div>

    <!-- 循环列表内容 -->
    <div class="report-content">
        @foreach($xyprintPreview as $item)
        <li>
            <b>{{$item->xy_sx_ID}}</b>&nbsp;&nbsp;{{$item->xylight_label}}
        </li>
        @endforeach
    </div>
</body>
</html>

关键属性说明 #

• @page：固定A4纸尺寸和边距，让浏览器可自动计算每页可容纳的内容高度，精准触发分页
• column-fill: auto：配合三列计数实现数据优先按列填充，第一列填满后再填第二列，三列占满当前页后自动流转到下一页继续排版
• break-inside: avoid：保证每条善信记录不会被拆分到两页，避免单条内容一半在上页、一半在下页
• 打印场景下的固定页眉设置：让每一页都自动重复显示标题栏和列名，无需手动逐页写表头

需规避的常见问题 #

• 不要给三列内容容器设置固定高度，避免浏览器无法自动识别分页触发点
• 不要用大段margin硬凑列间距，直接用column-gap控制，避免列宽计算偏差导致内容溢出
• 不要在循环里每次生成独立的ul容器，之前的写法会产生不必要的垂直间距，直接将li放在三列容器下即可

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