使用 gridlayout bootstrap 时，dompdf laravel 上的文本重叠

Question

我尝试在 dompdf 上使用 bootstrap 4 的网格布局，但生成的文本重叠，使其不可读。最初我使用 offset-md-4 ，但它没有用，我用 col-md-2 和 col-md-8 再次测试，结果是文本不断堆积。

我使用了这个 dompdf： https://github.com/barryvdh/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>&nbsp;{{$dataDokumen->nomorsj}}</td>
                            </tr>
                            <tr>
                                <td>Tanggal</td>
                                <td>:</td>
                                <td>&nbsp;{{AppHelper::formatTanggal($dataDokumen->created_at)}}</td>
                            </tr>
                            <tr>
                                <td>PO Store</td>
                                <td>:</td>
                                <td>&nbsp;{{$poStore}}</td>
                            </tr>
                            <tr>
                                <td>PO Vendor</td>
                                <td>:</td>
                                <td>&nbsp;{{$dataDokumen->nomorpo}}</td>
                            </tr>
                            <tr>
                                <td>Tracking</td>
                                <td>:</td>
                                <td>&nbsp;{{$dataDokumen->trackingcode}}</td>
                            </tr>
                        </table>
                    </div>
        
            </div>
    </div>

Answer 1

Bootstrap的Grid system relies on flexbox which was introduced in CSS3. Dompdf only supports CSS 2.1. From the readme:

dompdf is (mostly) a CSS 2.1 compliant HTML layout and rendering engine

您需要确保您的 HTML 不依赖于 flexbox，因此在这种情况下，您可能需要改为使用更多 <table> 标签来获得您想要的布局。

或者，您可以删除 Dompdf 并切换到现代 PDF 库，例如 Browsershot。

Browsershot 基于 Puppeteer 构建，它是 Chrome 的无头版本，因此您将获得完整的 CSS 支持，包括 flexbox，因此您可以继续使用完整的Boostrap 网格布局的强大功能。

根据个人经验，我发现 Browsershot 比使用 Laravel Dompdf 或 Laravel Snappy（使用 wkhtmltopdf）生成 PDF 更可靠。

使用 gridlayout bootstrap 时，dompdf laravel 上的文本重叠

text overlapping on dompdf laravel when using gridlayout bootstrap

dompdf

laravel