JavaScript/html2pdf: Wieso werden die Seiten nicht richtig gedruckt?
Hi, ich möchte mit JavaScript und den Bibliotheken JsBarcode und html2pdf Barcodes generieren, einen Text oberhalb des Barcodes ausgeben und diesen dann als PDF speichern, um damit Etiketten mit Barcodes zu drucken.
Leider habe ich dabei aber das Problem, dass meine Seiten immer weiter nach oben geschoben werden und somit dann ein Label auf zwei Seiten gedruckt wird.
Kennt jemand das Problem oder kann mir dabei helfen?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>html2pdf</title>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<style>
.label {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 60mm;
height: 30mm;
margin: 0;
padding: 0;
}
.label-text-center {
text-align: center;
margin-top: 0;
margin-bottom: 0;
}
svg {
width: auto;
height: 60%;
}
</style>
</head>
<body>
<div class="wrapper" id="element-to-print">
<div class="label">
<p class="label-text-center">headline01</p>
<p class="label-text-center">headline01</p>
<svg id="barcode" class="label-image-center"></svg>
</div>
</div>
<script>
// Generiere Barcodes für alle SVGs mit der Klasse "barcode"
JsBarcode("#barcode", "5901234123457", { format: "EAN13" });
// PDF-Optionen
var opt = {
margin: 0,
filename: 'barcodes.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'mm', format: [60, 30], orientation:'landscape' }
};
// Erstelle das PDF und speichere es
html2pdf().set(opt).from(document.getElementById('element-to-print')).save();
</script>
</body>
</html>
HTML,
Webseite,
CSS,
JavaScript,
HTML5,
Programmiersprache,
Webentwicklung,
Frontend,
node.js
