Bootstrap 4分页拆分问题及Laravel Blade模板SimpleQR二维码打印问题

核心修改点 #

• 你原先全局给所有div加break-inside规则太宽泛，反而会冲突，改为精准作用于每个二维码的外层容器，同时添加兼容旧浏览器的page-break-inside属性
• Bootstrap的row默认是flex布局，打印场景下改为block布局可避免flex子项自动拉伸导致的分页计算异常
• 移除循环中重复的id="print1"属性，id在单页中不能重复，改为自定义类名控制样式
• 给每个二维码容器固定高度，和你设置的二维码尺寸匹配，避免浏览器分页时高度计算偏差
• 打印时隐藏非必要元素（比如打印按钮），避免占用打印空间干扰分页计算

修改后完整代码 #

<style>
/* 通用打印规则 */
@media print{
    /* 隐藏打印按钮等非打印内容 */
    .no-print, #printbtn {
        display: none !important;
    }
    /* 把row从flex改成block，避免flex布局的分页问题 */
    .row.print-row {
        display: block !important;
    }
    /* 每个二维码容器的打印规则 */
    .qr-item {
        display: block !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        /* 高度根据你的二维码高度+下方文字高度调整，示例为二维码高度加30px预留文字位置 */
        height: {{ $height + 30 }}px !important;
        width: 33%; /* 一行放3个，要调整每行数量直接修改这个百分比即可 */
        float: left;
        text-align: center;
        padding: 1em;
        box-sizing: border-box;
    }
}
</style>
<div class="container">
    <div class="text-center no-print" style="margin: 2em">
        <div class="btn btn-info add-new" id="printbtn" onclick="printDiv()" value="Print QR"> Print</div>
    </div>
    <!-- 给row加自定义类print-row方便控制打印样式 -->
    <div class="row print-row">
        @foreach ($items as $item)
            <!-- 移除重复id，加自定义类qr-item -->
            <div class="col qr-item">
                <div class="visible-print">
                    {!! QrCode::size($height)->generate(url('/product/show/' . $item->id)) !!}
                    <p><small>{{ $item->material_id }}</small></p>
                </div>
            </div>
         @endforeach
    </div>
</div>

可选优化方案 #

如果调整后还是出现SVG拆分问题，可以直接将SimpleQR的生成格式改为PNG，打印兼容性更强，修改生成代码即可：

{!! QrCode::size($height)->format('png')->generate(url('/product/show/' . $item->id)) !!}

打印验证注意事项 #

打印预览时选择对应纸张尺寸（通常为A4），关闭浏览器默认的页眉页脚、调整页边距为默认或最小，确认分页位置是否正常。

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