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

Question

我正在尝试通过 Laravel blade 模板中的 SimpleQR 代码生成器即时生成一批 QR 代码以进行打印。但是当发生分页时它会破坏二维码。我尝试使用 break-inside 属性来避免，但它并没有解决问题。另外，我找到的解决方案之一是，我必须将显示属性设置为阻塞，因为它使用了弹性框。但是，它在 SVG 周围的 parent 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>

截图

Answer 1

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

@media print { figure { break-inside: avoid; } }

在您的 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>

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

Page break issues in Bootstrap 4 and SimpleQR code in blade template?

css

printing

laravel-blade

bootstrap-4