Programmiersprache – die besten Beiträge

Verwandte Themen
CoSci
07.10.2024, 23:11
Mit Bildern
Mit Links

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>
Bild zum Beitrag
HTML, Webseite, CSS, JavaScript, HTML5, Programmiersprache, Webentwicklung, Frontend, node.js
2 Antworten

Meistgelesene Beiträge zum Thema Programmiersprache

Mehr meistgelesene Fragen zu Programmiersprache