Generieren Sie PDF-Dateien in JavaScript
- Generieren Sie PDF-Dateien in JavaScript
-
Verwenden Sie die
jsPDF-Bibliothek, um PDFs in JavaScript zu generieren -
Verwenden Sie die Bibliothek
html2pdf, um PDF in JavaScript zu generieren
In diesem Artikel lernen wir die beste Bibliothek für die PDF-Erstellung in JavaScript-Quellcode kennen und wie wir diese Bibliothek in unserem JavaScript-Code verwenden können.
Generieren Sie PDF-Dateien in JavaScript
Wir haben oft Optionen zum Herunterladen von Dateien auf Webseiten wie PDFs gesehen. Der Entwickler muss mithilfe von Programmcode eine PDF-Datei generieren, um dem Benutzer diese Funktionalität bereitzustellen.
Wir können mehrere Bibliotheken in JavaScript verwenden, um eine PDF-Datei zu erstellen. Beispielsweise bieten viele Websites die Möglichkeit, Dateien wie Rechnungen, Tickets, Lebensläufe usw. zu generieren und herunterzuladen.
Diese Websites verwenden verschiedene Bibliotheken, um diese Funktionalität auszuführen. Wir werden die beiden am häufigsten verwendeten Bibliotheken anhand von Beispielen diskutieren und lernen.
Verwenden Sie die jsPDF-Bibliothek, um PDFs in JavaScript zu generieren
Nur für JavaScript haben wir das npm-Bibliothekspaket jsPDF zum Erstellen von PDFs. Bei der Verwendung dieser Bibliothek ist kein serverseitiges Skripting erforderlich.
Wir können eine PDF-Datei generieren, indem wir den dynamischen Inhalt verarbeiten. Es ist eine schnelle und einfache Möglichkeit, eine PDF-Datei in 3 Codezeilen zu generieren, wie unten gezeigt.
Grundlegende Syntax:
var myDoc = new jsPDF(); // object
myDoc.text(10, 10, 'DelftStack Website!'); // content
myDoc.save('dummyFile.pdf'); // saving
Wir müssen ein Objekt erstellen und es mit dem Schlüsselwort new und jsPDF() in einer Variablen speichern. Dann müssen wir den Inhalt als String mit der Eigenschaft text eines Objekts festlegen.
Abschließend speichern wir die PDF-Datei mit der Eigenschaft save.
Verwenden Sie die Bibliothek html2pdf, um PDF in JavaScript zu generieren
Die html2pdf-Bibliothek ermöglicht es uns, sie in unsere Website mit JavaScript-Quelle einzubetten und den Inhalt der Webseite in ein PDF-Dokument zu konvertieren. Das PDF-Dokument wird als PDF herunterladbar sein.
Laden Sie einfach die Bibliothek herunter und importieren Sie sie in unsere Quelle, bevor Sie sie verwenden.
Grundlegende Syntax:
const docElement = document.getElementById('ticket');
html2pdf().from(docElement).save();
Wie oben gezeigt, erhalten wir den Elementinhalt durch document.getElementById() und mit html2pdf().from(docElement).save() können wir den Inhalt in PDF konvertieren und die Datei herunterladen.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>HTML to PDF conversion</title>
<script src="html2pdf.bundle.min.js"></script>
<script>
function createPDF() {
// get the element of ticket content.
const docElement = document.getElementById('ticket');
// select the element and save as the PDF.
html2pdf().from(docElement).save();
}
</script>
</head>
<body>
<h1 style="color:blueviolet">DelftStack Learning</h1>
<h3>JavaScript create and download pdf</h3>
<div id="ticket">
<h1>Our Ticket</h1>
<p>Ticket content here</p>
</div>
<button onclick="createPDF()">Download as PDF</button>
</body>
</html>
Ausgang:
Im obigen HTML-Quellbeispiel haben wir die html2pdf-Bibliothek bereits heruntergeladen und in <head>-Tags importiert. Wir haben ein div-Element für das Ticket erstellt, die ID ticket dafür definiert und Dummy-Inhalte für dieses div-Element von HTML bereitgestellt.
Dann gibt es ein Schaltflächenelement Als PDF herunterladen auf dem Klickereignis dieser Schaltfläche; wir haben die Funktion createPDF() aufgerufen. Innerhalb dieser Funktion haben wir zunächst das Element, indem wir document.getElementById('ticket') verwenden und es in einer Variablen speichern.
Schließlich haben wir die Bibliotheksmethode html2pdf from() und save() verwendet. Wir müssen nur das Element in der Methode from() als Argument übergeben und die Methode save() aufrufen.
Laden Sie diese Bibliothek herunter, speichern Sie die obige Quelle mit der HTML-Erweiterung und öffnen Sie sie im Browser, um die Ergebnisse anzuzeigen.