PDF-WERKZEUGE

Wie man PDF-Dateien mit JavaScript generiert

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Darrius Serrant

Aktualisiert:Juli 28, 2025

1.0 Einführung

Adobe entwickelte das Portable Document Format (PDF) mit dem Ziel, Dokumente mit Text und Grafiken zu teilen. Ein zusätzliches Programm ist erforderlich, um eine PDF-Datei online zu öffnen. In der modernen Welt sind PDF-Dateien äußerst wichtig für wichtige Dokumente. Für die Erstellung von Dokumentationen und Rechnungen nutzen viele Unternehmen PDF-Dateien. Entwickler produzieren und generieren PDFs von Dokumenten, um den Anforderungen der Kunden gerecht zu werden. Dank moderner Bibliotheken war es noch nie einfacher, PDFs zu erstellen. Bei der Auswahl der idealen Bibliothek für ein Projekt müssen wir verschiedene Faktoren berücksichtigen, einschließlich der Erstellungs-, Lese- und Umwandlungsfähigkeiten der Bibliothek.

In diesem Artikel werden wir verschiedene JavaScript-Bibliotheken zur PDF-Erstellung diskutieren. Wir werden die Funktionen und Anwendungsfälle der JS-Bibliothek erkunden und uns auf drei Hauptaspekte konzentrieren:

Kompatibilität der Laufzeitumgebung
Unterstützung für benutzerdefinierte Schriftarten und Module für Typografie
Benutzerfreundlichkeit

Am Ende dieses Artikels werden Sie in der Lage sein, die geeignetste PDF-Bibliothek für Ihre JavaScript-Anwendung auszuwählen. Wir werden auch IronPDF vorstellen, eine leistungsstarke und praktische PDF-Bibliothek.

class="hsg-featured-snippet">

Schritte zur Generierung von PDF-Dateien in JavaScript

Verwenden Sie die text-Methode der PDFKit-Bibliothek, um Text in das PDF einzufügen
Nutzen Sie die createPdf-Methode der pdfmake-Bibliothek in JavaScript
Erstellen Sie eine Instanz der jsPDF-Klasse aus der jsPDF-Bibliothek, um das PDF zu erzeugen
Geben Sie Konfigurationen an die html2pdf-Methode der html2pdf-Bibliothek weiter
Verwenden Sie die RenderHtmlAsPdf-Methode aus der IronPDF-Bibliothek

2.0 Bibliotheken

Angenommen, wir möchten, dass der Kunde eine Rechnung, die wir haben, herunterladen und drucken kann. Wir möchten außerdem, dass diese Rechnung mit guter Formatierung ordnungsgemäß gedruckt wird. Hier werden wir uns einige der beliebtesten Bibliotheken zur Umwandlung dieser Rechnung von HTML-Format in PDF ansehen.

2.1 PDFKit

Eine der ersten PDF-Bibliotheken, die im umfangreichen JavaScript-Ökosystem eingeführt wurden, ist PDFKit. Seit seiner ersten Veröffentlichung im Jahr 2012 hat es erhebliche Beliebtheit erlangt und wird bis 2021 weiterhin regelmäßig aktualisiert. PDFKit bietet Unterstützung für sowohl Node.js als auch Webbrowser durch Webpack, obwohl es im Vergleich zu anderen hier behandelten Bibliotheken möglicherweise etwas komplexer ist. Zudem werden wir im Vergleich beobachten, dass bestimmte PDF-Bibliotheken im Wesentlichen Wrapper für PDFKit sind.

Benutzerdefinierte Schriftarten und Bild-Einbettung sind unterstützt; jedoch gibt es keine hochrangige API. Außerdem ist die Dokumentation häufig komplex. Wie Sie erwarten können, braucht es etwas Gewöhnung, und zunächst werden Sie feststellen, dass das Erstellen von PDFs keine der einfachsten Aufgaben ist.

// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');

// Create a new PDF document
const doc = new PDFDocument();

// Add your content to the document here
doc.text('Hello world!');

// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));

// Finalize the PDF file
doc.end();

// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');

// Create a new PDF document
const doc = new PDFDocument();

// Add your content to the document here
doc.text('Hello world!');

// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));

// Finalize the PDF file
doc.end();

JAVASCRIPT

2.2 pdfmake

Eine Wrapper-Bibliothek für PDFKit ist pdfmake. Der Hauptunterschied zwischen den beiden liegt in ihren Programmierparadigmen:

pdfmake verfolgt einen deklarativen Ansatz, wohingegen PDFKit die traditionelle imperativ-technische Vorgehensweise befolgt. Daher ist es mit der pdfmake-Bibliothek einfacher, sich auf die gewünschte Funktionalität der PDF-Generierung zu konzentrieren, anstatt Zeit mit der Anleitung der Bibliothek zu verbringen, wie ein bestimmtes Ergebnis erzielt werden soll.

Es ist jedoch erwähnenswert, dass nicht alles, was vielversprechend erscheint, fehlerfrei ist. Die Verwendung von Webpack und der Versuch, benutzerdefinierte Schriftarten mit pdfmake zu integrieren, kann potenziell zu Problemen führen. Leider gibt es online nur begrenzt Informationen zu diesem Problem. Wenn Sie Webpack nicht nutzen, können Sie immer noch mühelos das Git-Repository klonen und das Skript zur Einbettung von Schriftarten ausführen.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
</head>
<body>
    <script type="text/javascript">
        function downloadPdf() {
            // Define the document structure
            var docDefinition = {
                content: [
                    { text: "Hello world" }
                ],
                defaultStyle: {}
            };
            // Create and print the PDF
            pdfMake.createPdf(docDefinition).print();
        }
    </script>
    <button onclick="downloadPdf()">Print pdf</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
</head>
<body>
    <script type="text/javascript">
        function downloadPdf() {
            // Define the document structure
            var docDefinition = {
                content: [
                    { text: "Hello world" }
                ],
                defaultStyle: {}
            };
            // Create and print the PDF
            pdfMake.createPdf(docDefinition).print();
        }
    </script>
    <button onclick="downloadPdf()">Print pdf</button>
</body>
</html>

HTML

Das Ergebnis des oben genannten Codes wird unten angezeigt.

Wie man mit JavaScript eine PDF-Datei generiert: Abbildung 1

2.3 jsPDF

jsPDF ist ein Open-Source-Paket, das ausschließlich reines JavaScript verwendet, um PDF-Dateien zu erstellen. Es erstellt eine PDF-Seite und formatiert sie basierend auf Ihrem bereitgestellten Format. jsPDF ist die am weitesten verbreitete PDF-Bibliothek auf GitHub und ist hochgradig zuverlässig und gut gepflegt. Es bietet benutzerfreundliche Module sowohl für Node.js als auch für Webbrowser, da sie gemäß dem AMD-Modulstandard exportiert werden.

Hinsichtlich PDFKit halten seine APIs an einem imperativen Paradigma fest, was das Design komplexer Layouts erschweren kann. Was die Einbettung von Schriftarten betrifft, ist der einzige zusätzliche Schritt, der erforderlich ist, die Konvertierung der Schriften in TTF-Dateien, was ein unkomplizierter Prozess ist.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
    <script>
        function generatePDF() {
            // Create a new instance of jsPDF
            var pdf = new jsPDF({
                orientation: 'p',
                unit: 'mm',
                format: 'a5',
                putOnlyUsedFonts: true
            });
            // Add text to the PDF
            pdf.text("Hello World", 20, 20);
            // Save the PDF
            pdf.save('Demopdf.pdf');
        }
    </script>
</head>
<body>
    <button onclick="generatePDF()">Print Pdf</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
    <script>
        function generatePDF() {
            // Create a new instance of jsPDF
            var pdf = new jsPDF({
                orientation: 'p',
                unit: 'mm',
                format: 'a5',
                putOnlyUsedFonts: true
            });
            // Add text to the PDF
            pdf.text("Hello World", 20, 20);
            // Save the PDF
            pdf.save('Demopdf.pdf');
        }
    </script>
</head>
<body>
    <button onclick="generatePDF()">Print Pdf</button>
</body>
</html>

HTML

Das Ergebnis des obigen Codes wird unten angezeigt.

Wie man mit JavaScript eine PDF-Datei generiert: Abbildung 2

2.4 html2pdf

Um Webseiten und Vorlagen in PDF-Dateien umzuwandeln, kombiniert html2pdf die Funktionalität von jsPDF und Html2Canvas in einem einzigen Modul.

Um Ihre Website in ein PDF umzuwandeln, befolgen Sie diese Schritte:

Installieren Sie die html2pdf-JavaScript-Bibliothek lokal auf Ihrem Server mit NPM oder fügen Sie sie in Ihren HTML-Code ein, wie im folgenden Beispiel gezeigt:
Fügen Sie eine 'PDF erstellen'-Funktion hinzu, die aufgerufen wird, um das angegebene Segment der Webseite in ein PDF zu konvertieren. Sie können die Methode getElementById verwenden, um das gewünschte Segment auszuwählen.
Passen Sie die Formatierungsoptionen an, indem Sie sie der Variablen 'opt' hinzufügen, bevor Sie sie an html2pdf übergeben. Dadurch können Sie verschiedene Einstellungen für die PDF-Erstellung festlegen.
Fügen Sie eine Schaltfläche auf Ihrer HTML-Seite hinzu, die die generatePDF-Funktion aktiviert, wenn sie angeklickt wird.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script>
        function generatePDF() {
            // Define the HTML content
            const page = 'Hello World!';
            // PDF options
            var opt = {
                margin: 1,
                filename: 'Demopdf.pdf',
                image: { type: 'jpeg', quality: 0.98 },
                html2canvas: { scale: 2 },
                jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
            };
            // Convert HTML to PDF
            html2pdf().set(opt).from(page).save();
        }
    </script>
</head>
<body>
    <button onclick="generatePDF()">Print Pdf</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script>
        function generatePDF() {
            // Define the HTML content
            const page = 'Hello World!';
            // PDF options
            var opt = {
                margin: 1,
                filename: 'Demopdf.pdf',
                image: { type: 'jpeg', quality: 0.98 },
                html2canvas: { scale: 2 },
                jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
            };
            // Convert HTML to PDF
            html2pdf().set(opt).from(page).save();
        }
    </script>
</head>
<body>
    <button onclick="generatePDF()">Print Pdf</button>
</body>
</html>

HTML

Unten ist das Ergebnis des obigen Codes.

Wie man mit JavaScript eine PDF-Datei generiert: Abbildung 3

2.5 IronPDF

IronPDF für Node.js vereinfacht den Prozess der programmgesteuerten Erstellung und Anpassung von PDF-Dokumenten. Entwickelt von Iron Software, einem vertrauenswürdigen Anbieter von leistungsstarken Dokumentenverarbeitungsbibliotheken, bietet IronPDF eine robuste Lösung zur PDF-Erstellung in Node.js-Umgebungen. Es integriert sich nahtlos in Node.js-Projekte und bietet Entwicklern leistungsstarke Werkzeuge zur einfachen Erstellung, Formatierung und Bearbeitung von PDFs.

Die IronPDF-Bibliothek verfügt über eine Vielzahl von Funktionen, einschließlich der Möglichkeit, Seiten in neuen oder bestehenden PDF-Dokumenten zu trennen und zu kombinieren, vorhandene PDF-Dateien zu lesen und zu bearbeiten, Bilder aus PDF-Dateien zu extrahieren, Text, Grafiken, Lesezeichen, Wasserzeichen, Kopf- und Fußzeilen zu PDF-Dateien hinzuzufügen, alles ohne die Notwendigkeit von Acrobat Reader. Aus CSS und CSS-Mediendateien können PDF-Dokumente erstellt werden. IronPDF ermöglicht es Benutzern, sowohl neue als auch bereits vorhandene PDF-Formulare zu erstellen, hochzuladen und zu aktualisieren.

Hauptmerkmale von IronPDF für Node.js:

Vielseitige PDF-Generierung: Mit IronPDF können Entwickler PDFs aus verschiedenen Quellen einschließlich HTML, CSS, JavaScript, Bildern und anderen Dateitypen erzeugen. Diese Flexibilität ermöglicht die Erstellung dynamischer und ansprechender PDF-Dokumente, die auf spezifische Anforderungen zugeschnitten sind.
Erweiterte Dokumentenanpassung: IronPDF ermöglicht es Entwicklern, PDF-Dokumente mit Funktionen wie Kopf- und Fußzeilen, Anhängen, digitalen Signaturen, Wasserzeichen und Lesezeichen zu verbessern. Dies ermöglicht die Erstellung von PDFs in professioneller Qualität mit reichhaltigem Inhalt und interaktiven Elementen.
Sicherheitsmerkmale: IronPDF bietet robuste Sicherheitsmerkmale, um PDFs vor unbefugtem Zugriff zu schützen. Entwickler können Sicherheitsmaßnahmen wie Passwörter, digitale Signaturen, Metadaten und andere Sicherheitseinstellungen implementieren, um sensible Informationen in PDF-Dokumenten zu schützen.
Optimierte Leistung: IronPDF ist für eine optimale Leistung ausgelegt und bietet vollständige Unterstützung für Multithreading und asynchrone Verarbeitung. Dies gewährleistet eine effiziente PDF-Erstellung und macht es geeignet für geschäftskritische Anwendungen, bei denen die Leistung entscheidend ist.

Umfassende Funktionsvielfalt: Mit über 50 Funktionen zum Erstellen, Formatieren und Bearbeiten von PDF-Dokumenten bietet IronPDF eine umfassende Lösung für alle PDF-bezogenen Aufgaben. Von der grundlegenden Dokumentenerstellung bis hin zur erweiterten Anpassung und Sicherheit bietet IronPDF eine breite Palette von Funktionen, um die Anforderungen von Entwicklern zu erfüllen.

Um eine PDF-Datei mit benutzerdefiniertem JavaScript zu generieren, werfen Sie einen Blick auf den folgenden Code, der es mühelos ermöglicht, den HTML-Inhalt ansprechender zu gestalten:

import { PdfDocument } from "@ironsoftware/ironpdf";

(async () => {
   // Define the JavaScript code to change text color to red
   const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";

   // Create rendering options object
   const renderOptions = {
       enableJavaScript: true,
       javascript: javascriptCode,
   };

   // HTML content to be rendered
   const htmlContent = "<h1>Hello World!!</h1>";

   // Render HTML content to a PDF
   const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });

   // Save the PDF with the executed JavaScript
   await pdf.saveAs("result1.pdf");
})();

import { PdfDocument } from "@ironsoftware/ironpdf";

(async () => {
   // Define the JavaScript code to change text color to red
   const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";

   // Create rendering options object
   const renderOptions = {
       enableJavaScript: true,
       javascript: javascriptCode,
   };

   // HTML content to be rendered
   const htmlContent = "<h1>Hello World!!</h1>";

   // Render HTML content to a PDF
   const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });

   // Save the PDF with the executed JavaScript
   await pdf.saveAs("result1.pdf");
})();

JAVASCRIPT

Im obigen Code wird zunächst ein JavaScript-Code-Snippet definiert, um die Farbe aller <h1>-Elemente in Rot zu ändern. Dieser Code wird dann in die Render-Optionen integriert, zusammen mit der Aktivierung der JavaScript-Ausführung. Anschließend wird ein HTML-Inhalt mit einem <h1>-Element mit dem Text "Hello World!!" angegeben. Das PDF-Dokument wird aus diesem HTML-Inhalt mit den definierten Renderoptionen generiert, wobei sichergestellt wird, dass der JavaScript-Code während des Rendering-Prozesses ausgeführt wird. Schließlich wird das resultierende PDF-Dokument als "result1.pdf" gespeichert. Dieser Code zeigt die Fähigkeit von IronPDF, dynamische JavaScript-Änderungen in die PDF-Generierung einzubinden, sodass Entwickler maßgeschneiderte und interaktive PDF-Dokumente programmgesteuert erstellen können.

Wie man mit JavaScript eine PDF-Datei generiert: Abbildung 4

3.0 Fazit

Zusammenfassend lässt sich sagen, dass der oben dargestellte JavaScript-Code für Missbrauch und mögliche Sicherheitsrisiken anfällig sein kann, wenn er von anderen verwendet wird. Es ist wichtig, die Möglichkeit von unbefugtem Zugriff und Sicherheitslücken bei der Implementierung eines solchen Codes auf einer Website zu berücksichtigen. Kompatibilitätsprobleme bei unterschiedlichen Browsern und Plattformen sollten ebenfalls berücksichtigt werden, einschließlich der Notwendigkeit, die Unterstützung für ältere Browser sicherzustellen, die möglicherweise nicht über alle erforderlichen Funktionen verfügen.

Im Gegensatz dazu bietet die IronPDF Node.js-Bibliothek erweiterte Sicherheitsmaßnahmen, um gegen potenzielle Bedrohungen zu schützen. Sie ist nicht von bestimmten Browsern abhängig und mit allen gängigen Browsern kompatibel. Mit nur wenigen Zeilen Code können Entwickler PDF-Dateien einfach erstellen und lesen, indem sie IronPDF verwenden.

The library provides various licensing options to cater to different developer needs, including a free trial license for developers and additional licenses available for purchase. Das Lite-Paket, das für $799 erhältlich ist, beinhaltet eine permanente Lizenz, ein Jahr Produktsupport und Upgrade-Optionen ohne wiederkehrende Kosten. Diese Lizenzen können in Entwicklungs-, Staging- und Produktionsumgebungen verwendet werden. Additionally, it is also available for other languages like C# .NET, Java, and Python. Besuchen Sie die IronPDF-Website für weitere Informationen.

Darrius Serrant

Jetzt mit dem Ingenieurteam chatten

Full-Stack-Software-Ingenieur (WebOps)

Darrius Serrant hat einen Bachelor-Abschluss in Informatik von der University of Miami und arbeitet als Full-Stack-WebOps-Marketing-Ingenieur bei Iron Software. Seit seiner Jugend vom Programmieren angezogen, sah er die Informatik als sowohl mysteriös als auch zugänglich, was es zum perfekten Medium für Kreativität und Problemlösung ...