Konvertieren HTML in PDF in JavaScript

  2. How-To's
  3. JavaScript-Anleitungen
  4. Konvertieren HTML in PDF in JavaScript
Kushank Singh 12 Oktober 2023
JavaScript JavaScript PDF
  1. Verwendung der Bibliothek jsPDF zur Konvertierung von HTML in PDF
  2. Verwenden Sie ein Fensterobjekt, um HTML in PDF zu konvertieren
Konvertieren HTML in PDF in JavaScript

Beim Herunterladen großer Datenmengen aus einer Webanwendung ist das PDF-Dateiformat praktisch. Es ermöglicht Benutzern, dynamisches Material als Datei für den Offline-Verbrauch herunterzuladen. HTML-Material wird in ein PDF-Dokument umgewandelt und mithilfe der Funktion zum Exportieren in PDF als PDF-Datei heruntergeladen. Ein serverseitiges Skript konvertiert HTML in PDF in der dynamischen Webanwendung.

In diesem Tutorial führen wir eine solche Konvertierung mit JavaScript durch.

Verwendung der Bibliothek jsPDF zur Konvertierung von HTML in PDF

Bei dieser Methode verwenden wir die Bibliothek jsPDF, um HTML in PDF zu konvertieren. Es ist eine der am besten zu verwendenden Bibliotheken. Die Bibliothek jsPDF bietet verschiedene Techniken und Möglichkeiten zur individuellen Anpassung der PDF-Erzeugung.

Überprüfen Sie den Code unten.

  • HTML
<!DOCTYPE html>
<html>
  <body>
    <div>
      <p>Convert this text to PDF.</p>
    </div>
    <div id="hidden-element">This will not be printed</div>
  </body>
</html>
  • JavaScript
var source = window.document.getElementsByTagName('body')[0];
var specialElementHandlers = {
  '#hidden-element': function(element, renderer) {
    return true;
  }
};
var doc = new jsPDF({orientation: 'landscape'});
doc.setFont('courier');
doc.setFontType('normal');
doc.setFontSize(24);
doc.setTextColor(100);
doc.fromHTML(
    elementHTML, 15, 15,
    {'width': 170, 'elementHandlers': specialElementHandlers});

Die Eigenschaft orientation legt die Ausrichtung des Papiers fest. Die Optionen setFont() und setFontType() werden verwendet, um die Schriftart und den Schriftstil des Textes einzustellen. Mit den Funktionen setFontSize() und setTextColor() werden Schriftgröße und Farbe des Textes eingestellt.

Verwenden Sie ein Fensterobjekt, um HTML in PDF zu konvertieren

Bei dieser Methode erstellen wir ein Fensterobjekt, mit dem wir ein zugehöriges Dokument erstellen und den HTML-Text in die Datei schreiben, um sie als PDF zu exportieren.

Siehe den Code unten.

<html>
<head>
  <title></title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  
  <script type="text/javascript">
    $("#btnPrint").live("click", function () {
      var divContents = $("#text").html();
      var printWindow = window.open('', '', 'height=400,width=800');
      printWindow.document.write('<html><head><title>Html to PDF</title>');
      printWindow.document.write('</head><body >');
      printWindow.document.write(text);
      printWindow.document.write('</body></html>');
      printWindow.document.close();
      printWindow.print();
    });
  </script>
  </head>
  <body>
    <form id="form1">
    <div id="text">
      Convert this text to PDF.
    </div>
      <input type="button" value="Print Div Contents" id="btnPrint" />
    </form>
  </body>
</html>

Im obigen Beispiel öffnet die Funktion window.open() ein Dokument mit den angegebenen Abmessungen und die Methode document.write() wird verwendet, um Text in das geöffnete Dokument zu schreiben.

Verwandter Artikel - JavaScript PDF