fix: Use base64-encoded PNG for QR code in PDF stickers

DomPDF renders embedded PNG images more reliably than inline SVG.
Changed QR code generation to OUTPUT_IMAGE_PNG with base64 encoding,
then embed as img tag in the PDF HTML.
This commit is contained in:
twotalesanimation
2026-01-02 20:42:19 +02:00
parent 09198a9f7d
commit 5dfb63dacb
2 changed files with 108 additions and 31 deletions
@@ -0,0 +1,83 @@
<?php $__env->startSection('content'); ?>
<div class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-bold mb-6">QR Sticker Preview</h1>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Order Info -->
<div class="md:col-span-1 bg-white rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold mb-4">Order Details</h2>
<div class="space-y-3 text-sm">
<div>
<p class="text-gray-600">Order Number</p>
<p class="font-semibold"><?php echo e($order->order_number); ?></p>
</div>
<div>
<p class="text-gray-600">UUID</p>
<p class="font-mono text-xs"><?php echo e($order->uuid); ?></p>
</div>
<div>
<p class="text-gray-600">Status</p>
<p class="font-semibold capitalize"><?php echo e(str_replace('_', ' ', $order->status)); ?></p>
</div>
<div>
<p class="text-gray-600">Customer</p>
<p class="font-semibold"><?php echo e($order->user?->name ?? 'N/A'); ?></p>
</div>
<div>
<p class="text-gray-600">Created</p>
<p class="font-semibold"><?php echo e($order->created_at->format('M d, Y H:i')); ?></p>
</div>
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($order->items->count() > 0): ?>
<div>
<p class="text-gray-600">Design</p>
<p class="font-semibold text-sm"><?php echo e($order->items->first()?->product?->name ?? 'Custom'); ?></p>
</div>
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
<div class="pt-4 border-t">
<p class="text-gray-600 text-xs">Sticker Path</p>
<p class="font-mono text-xs break-all"><?php echo e($stickerPath); ?></p>
</div>
</div>
<!-- Download Link -->
<a href="<?php echo e(route('ops.order.sticker.download', $order)); ?>" class="mt-6 inline-block w-full text-center bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
📥 Download PDF
</a>
</div>
<!-- PDF Preview -->
<div class="md:col-span-2 bg-white rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold mb-4">PDF Preview (A6 Sticker)</h2>
<div class="bg-gray-100 rounded border-2 border-gray-300 p-4" style="min-height: 400px;">
<iframe
src="<?php echo e($pdfUrl); ?>"
class="w-full h-full border-0"
style="min-height: 500px;"
title="Sticker PDF">
</iframe>
</div>
<p class="text-xs text-gray-500 mt-4">
If the PDF doesn't display above, it may be loading. Try refreshing or downloading the PDF directly.
</p>
</div>
</div>
<!-- Back Link -->
<div class="mt-8">
<a href="/" class="text-blue-600 hover:text-blue-800"> Back to Home</a>
</div>
</div>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/additional_design/resources/views/test/sticker-display.blade.php ENDPATH**/ ?>