dompdf 中 <td> 上的 SVG 图像失真

Posted 2023-03-14

技术标签:

【中文标题】dompdf 中 <td> 上的 SVG 图像失真【英文标题】：Distorted SVG Image on <td> in dompdf 【发布时间】：2022-01-07 01:49:38 【问题描述】：

我想用 dompdf 导出回顾数据，我使用的是来自 dompdf 的loadhtml()，在视图中我使用的是<img src"file.svg">，但图像输出不知何故失真。这是dompdf的代码

export.php

$reports = $this->getReports($request); extract($request->all());
        $html    = view('pdf/rekap-lp')->with(compact('reports', 'start_date', 'end_date'))->render();

$this->createQRCODE($reports);

$pdf = \App::make('dompdf.wrapper');
$pdf->setPaper('A4', 'portrait');
$pdf->loadHTML($html);
$pdf->setOptions(['isHtml5ParserEnabled' => true, 'isRemoteEnabled' => true]);

return $pdf->stream(uniqid().'.pdf');

这里是风景

<tr style="font-size: 13px">
     <td class="text-center"> $loop->iteration </td>
     <td> (ucfirst($item->dugaan_pelanggaran)) ?: '-' </td>
     <td class="text-center no-wrap">
          (strftime('%d %B %Y', strtotime($item->tanggal_laporan))) ?: '-' 
                </td>
     <td> (ucfirst($item->kronologis)) ?: '-' </td>
     <td> (ucfirst($item->lokasi)) ?: '-' </td>
     <td> (ucfirst($item->satker)) ?: '-' </td>
     <td>
        <img src=" asset('img/qr-code/lp/' . $item->id_lp .'.svg') " >
    </td>
</tr>

我的 .svg 二维码的输出是这样的

更新

我刚刚发现，如果我用http://localhost/detail/100这样的url生成二维码，二维码会失真，但如果我用字符串This is a very cool website生成二维码，显示的二维码是正常的，不会失真

【问题讨论】：

file.svg 中有什么？ @RobertLongson 带有 URL 的二维码我的意思是，请编辑问题并添加file.svg的标记。 【参考方案1】：

如果可能的话，给你的图片一个明确的高度和宽度可以解决这个问题。

Dompdf 似乎不能很好地处理具有自动高度和宽度的 svg，也不能很好地处理表格中的图像，因此两者结合起来将很难渲染！

如果无法做到这一点，在 dompdf 上处理表格和图像时的一些技巧是：

尝试将style="table-layout:fixed; width:100%" 添加到您的<table>。

尝试将style="height:auto; max-width:100%" 添加到您的<img>（在表格内），如果仍然不正确...

尝试将style="height:auto; max-width:none; width:100%" 添加到您的<img>。

通常 1 与 2 或 3 的组合将使其正确呈现。