我尝试在Dompdf上使用Bootstrap 4的网格布局，但是结果文本重叠，使其无法阅读。最初我使用offset-md-4，但它不起作用，我用col-md-2和col-md-8再次测试，结果是文本不断堆积。
我使用了Laravel Dompdf库。
此处为截图：
这是我的HTML代码：
<div class="container-fluid">
<div class="row mt-2">
<div class="col-md-4">
<h2>{{$dataStore->name}}</h2>
<address>
{{$dataStore->address}}<br>{{$dataStore->city->name}}</address>
</div>
</div>
<div class="row mt-2">
<div class="col-md-12">
<div class="text-center">
<h1><span class="font-weight-bold" style="font-size: 24px"><u>BUKTI PENERIMAAN BARANG</u></span></h1>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<p>Nama Suplier: {{$dataVendor->name}}</p>
<address>Alamat: {{$dataVendor->address}}</address>
</div>
<div class="col-md-8">
<table>
<tr>
<td>Nomor</td>
<td>:</td>
<td> {{$dataDokumen->nomorsj}}</td>
</tr>
<tr>
<td>Tanggal</td>
<td>:</td>
<td> {{AppHelper::formatTanggal($dataDokumen->created_at)}}</td>
</tr>
<tr>
<td>PO Store</td>
<td>:</td>
<td> {{$poStore}}</td>
</tr>
<tr>
<td>PO Vendor</td>
<td>:</td>
<td> {{$dataDokumen->nomorpo}}</td>
</tr>
<tr>
<td>Tracking</td>
<td>:</td>
<td> {{$dataDokumen->trackingcode}}</td>
</tr>
</table>
</div>
</div>
</div>
1条答案
按热度按时间siotufzp1#
Bootstrap的Grid system依赖于CSS3中引入的flexbox。Dompdf仅支持CSS 2.1。从readme：
dompdf是（主要）一个与CSS2.1兼容的HTML布局和呈现引擎
您需要确保您的HTML不依赖于flexbox，因此在这种情况下，您可能需要改为使用更多的
<table>标记来获得您想要的布局。或者，您可以删除Dompdf并切换到现代PDF库，如Browsershot。
Browsershot是基于Puppeteer构建的，Puppeteer是Chrome的无头版本，因此您将拥有完整的CSS支持，包括flexbox，这样您就可以继续使用Boostrap的网格布局的全部功能。
从个人经验来看，我发现Browsershot比使用Laravel Dompdf或Laravel Snappy（使用wkhtmltopdf）生成PDF更可靠。