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
Fehlermeldung "Serverfehler in Anwendung" beheben?

Moin, ich wollte mich gerade in einem Fitnessstudio anmelden, bekomme aber immer sobald ich zur memberarea komme diesen Fehlercode:

Laufzeitfehler

Beschreibung: Anwendungsfehler auf dem Server. Aufgrund der aktuellen benutzerdefinierten Fehlereinstellungen für diese Anwendung können die Details des Anwendungsfehlers (aus Sicherheitsgründen) nicht remote angezeigt werden. Sie können jedoch von Browsern angezeigt werden, die auf dem lokalen Server ausgeführt werden.

Details: Sie können die Details dieser Fehlermeldung auf dem lokalen Computer anzeigen, indem Sie ein <customErrors>-Tag in der Konfigurationsdatei web.config erstellen, die sich im Stammverzeichnis der aktuellen Webanwendung befindet. Das mode-Attribut dieses <customErrors>-Tags sollte dann auf "Off" festgelegt werden.

<!-- Web.Config Configuration File -->

<configuration>
    <system.web>
        <customErrors mode="Off"/>
    </system.web>
</configuration>

Hinweise: Die aktuelle Seite kann durch eine benutzerdefinierte Fehlerseite ersetzt werden, indem Sie das defaultRedirect-Attribut des <customErrors>-Konfigurationstags dieser Anwendung so setzen, das es auf einen benutzerdefinierten Fehlerseiten-URL zeigt.

<!-- Web.Config Configuration File -->

<configuration>
    <system.web>
        <customErrors mode="RemoteOnly" defaultRedirect="mycustompage.htm"/>
    </system.web>
</configuration>

Ich hab absolut kein Plan ob die Fehlermeldung an mir oder an der Internetseite des Betreibers liegt. Noch weiniger weiß ich wie man diese Fehlermeldung beheben kann.
Bitte helft mir.
Mfg

Webseite, fehlercode, Fehlermeldung, Serverfehler

Meistgelesene Beiträge zum Thema Webseite