Bootstrap 4 中的分页问题和刀片模板中的 SimpleQR 代码？

问题描述

我正在尝试通过 Laravel 刀片模板中的 SimpleQR 代码生成器即时生成一批 QR 代码以进行打印。但是当发生分页符时它会破坏二维码。我尝试使用 break-inside 属性来避免，但它没有解决问题。另外，我找到的解决方案之一，我必须将显示属性设置为阻止，因为它使用弹性框。但是，它在围绕 SVG 的父 div 上不起作用。 我的代码的当前状态是：

@media print{
    div{
        break-inside: avoid !important;
    }

}

</style>
    <div class="container">
        <div class="text-center" style="margin: 2em">
            <div class="btn btn-info add-new" id="printbtn" onclick="printDiv()" value="Print QR"> Print</div>
        </div>
        <div class="row">
            @foreach ($items as $item)
                <div class="col" id="print1" >
                        <div class="visible-print text-center" style="padding: 1em">
                            {!! QrCode::size($height)->generate(url('/product/show/' . $item->id)) !!}
                            <p><small>{{ $item->material_id }}</small></p>
                        </div>
                </div>
             @endforeach
        </div>
    </div>

截图

解决方法

您可以尝试使用 <figure> 元素而不是使用 <div>。然后定位图形元素

@媒体打印{ 数字 { 闯入：避免； } }

在您的 HTML 部分进行以下更改

  <div class="col" id="print1" >
                        <figure class="visible-print text-center" style="padding: 1em">
                            {!! QrCode::size($height)->generate(url('/product/show/' . $item->id)) !!}
                            <p><small>{{ $item->material_id }}</small></p>
                        </figure>
                    </div>