如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。