Wie kann ich Barcodes in einem digitalen Receipt einbetten?
- Einführung in Barcodes auf digitalen Quittungen
- Erzeugung des Barcodes
- Einbetten als Bild in digitalen Beleg
- Direktes Einbetten von SVG-Barcodes
- Praktisches Beispiel mit JsBarcode
- Barcode im PDF-Quittungs-Export
- Zusammenfassung
Einführung in Barcodes auf digitalen Quittungen
Ein Barcode ist ein maschinenlesbarer Code, der oft für die schnelle Erfassung von Informationen verwendet wird – beispielsweise zur eindeutigen Identifikation von Produkten oder Belegen. In digitalen Quittungen können Barcodes verschiedene Zwecke erfüllen: Sie ermöglichen dem Kunden, den Beleg schnell zu scannen, erleichtern die Archivierung in Systemen und schaffen eine Verbindung zwischen physischem und digitalem Nachweis. Um Barcodes in eine digitale Quittung einzubetten, müssen diese als Bild oder SVG dargestellt werden, da die meisten Quittungssysteme HTML oder PDF als Ausgabeformat unterstützen.
Erzeugung des Barcodes
Die erste Herausforderung besteht darin, den Barcode aus den relevanten Belegdaten zu generieren. Dazu können Bibliotheken verwendet werden, die Barcode-Grafiken automatisch erstellen, etwa JsBarcode für JavaScript im Browser oder Barcode4J, ZXing und bwip-js serverseitig. Diese Tools erzeugen Barcodes in verschiedenen Formaten, meistens PNG-Bilder oder SVG-Grafiken. SVG hat den Vorteil, dass es als Vektorgrafik keine Qualitätsverluste bei Vergrößerung hat und direkt im HTML eingebettet werden kann.
Einbetten als Bild in digitalen Beleg
Hat man den Barcode als Bilddatei (z.B. PNG) vorliegen, so kann man diese Datei entweder als <img>-Element referenzieren oder – um den Beleg sauber und transportabel zu halten – das Bild in Base64-kodierter Form direkt in das HTML einbetten. Das verhindert Abhängigkeiten von externen Ressourcen. Hier ein Beispiel wie ein Barcode als Base64-Bild in einer HTML-Quittung eingebettet wird:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAlCAYAAABzW0p/AAAABmJLR0QA/wD/AP+gvaeTAAA..." alt="Barcode" />
Direktes Einbetten von SVG-Barcodes
Alternativ können Barcodes als SVG direkt im Quittungs-HTML genutzt werden. Dies erlaubt eine einfache Skalierung und Anpassung ohne Qualitätsverlust. Viele Barcode-Bibliotheken erlauben, das generierte SVG direkt in den Quelltext zu exportieren. Sie können das SVG einfach an der gewünschten Stelle in Ihrer HTML-Struktur einfügen. Beispiel:
Praktisches Beispiel mit JsBarcode
Im Web-Bereich ist JsBarcode eine sehr beliebte JavaScript-Bibliothek, die einfache HTML-Barcode-Elemente generiert. Man kann sie nutzen, um Barcodes im Browser dynamisch einzufügen. Nach dem Einbinden der Bibliothek kann man einen SVG-Container anlegen und mittels JsBarcode("#barcode", "123456789012") automatisch einen Barcode generieren. So können Belegdaten dynamisch in den Barcode integriert werden.
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
Barcode im PDF-Quittungs-Export
Falls Ihre digitalen Quittungen als PDF erzeugt werden, verwenden Sie Bibliotheken wie TCPDF, FPDF (PHP) oder ReportLab (Python), welche Barcode-Generierung unterstützen. Dort können Sie den Barcode direkt programmatisch einfügen. Alternativ erzeugen Sie zuvor ein Barcode-Bild mit einer Bibliothek und fügen dieses Bild anschließend in das PDF ein. Das Einbetten als Grafik sorgt für eine hohe Kompatibilität und ermöglicht Druck und Archivierung in hoher Qualität.
Zusammenfassung
Das Einbetten von Barcodes in digitalen Quittungen erfolgt in der Regel durch die Erzeugung einer Barcode-Grafik, diese kann als PNG- oder SVG-Datei vorliegen. Anschließend wird das Bild im HTML als <img>-Element oder als eingebettete SVG-Grafik integriert. JavaScript-Bibliotheken wie JsBarcode schaffen eine einfache Möglichkeit zur dynamischen Generierung im Browser. Für PDF-Quittungen bieten serverseitige Libraries Barcode-Erzeugung direkt für das Ausgabeformat an. Wichtig ist, dass das Format des Barcodes zur Anwendung und zum Scanner passt (z.B. Code128, EAN13), um die Lesbarkeit sicherzustellen.