Laravel中使用dompdf生成PDF时二维码显示失真问题

问题背景 #

使用Laravel的dompdf生成PDF时，二维码出现严重失真情况，无论通过CSS类、img标签设置尺寸都无法匹配预期大小，扫描识别困难。

核心原因 #

• 默认生成的二维码为SVG格式，dompdf对SVG缩放渲染支持不佳
• 二维码分辨率不足，缩放后出现像素化
• dompdf的DPI设置与二维码尺寸不匹配

解决步骤 #

1. 生成高分辨率PNG二维码 #

修改控制器中二维码生成逻辑，指定PNG格式并设置足够大的尺寸（避免后续缩放操作）：

// 生成PNG格式二维码，尺寸设为600px（高分辨率）
$qrCode = QrCode::format('png')
    ->size(600)
    ->generate(route('donate', ['hash' => $hash], true));

// 可选：将二维码存储到storage，使用URL替代base64更稳定
$qrPath = 'temp/qr-' . $hash . '.png';
Storage::put($qrPath, $qrCode);
$data['qr_code'] = Storage::url($qrPath);

// 若坚持使用base64，需确保是PNG编码
// $data['qr_code'] = base64_encode($qrCode);

2. 调整dompdf配置 #

提高DPI匹配二维码分辨率，同时确保纸张尺寸单位正确（dompdf默认单位为点，1英寸=72点）：

// 自定义横向纸张尺寸（示例为A4横向：297mm×210mm 转换为点单位）
$customPaper = [0, 0, 841.89, 595.28];
$file = $pdf->loadView('admin.order.card', $data)
    ->setPaper($customPaper, 'landscape')
    ->setOptions([
        'dpi' => 300, // 匹配二维码300DPI分辨率
        'isHtml5ParserEnabled' => true,
        'isRemoteEnabled' => true // 加载外部图片需开启此选项
    ]);

3. 优化CSS避免图片拉伸 #

设置二维码容器固定尺寸，图片保持等比例缩放，强制清晰渲染：

.qr-wrap {
    margin: 20px auto;
    width: 300px; /* 预期显示的二维码尺寸 */
    height: 300px;
}
.qr {
    width: 100%;
    height: auto; /* 保持宽高比，防止拉伸失真 */
    image-rendering: crisp-edges; /* 提升渲染清晰度 */
}

视图中对应标签修改：

<div class="qr-wrap">
    <img class="qr" src="{{ $card['qr_code'] }}" alt="捐赠二维码" />
</div>

4. 替换transform定位（可选） #

dompdf对transform属性支持有限，若右侧文本区域的定位导致二维码渲染异常，改用flex布局替代：

.card .right {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card .right .text {
    text-align: center;
    white-space: normal;
    width: 80%;
}

效果验证 #

完成上述修改后，生成的PDF中二维码将清晰显示，尺寸符合设定要求，可正常扫描识别。

内容的提问来源于stack exchange，提问作者twan