PDF-WERKZEUGE

Wie man PDF-Dateien in JavaScript erstellt

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

Aktualisiert:Juli 28, 2025

Im Bereich der Dokumentenfreigabe spielt das Portable Document Format (PDF), das von Adobe entwickelt wurde, eine entscheidende Rolle bei der Wahrung der Integrität von textreichen und optisch ansprechenden Inhalten. Der Zugriff auf eine PDF-Datei online erfordert typischerweise ein spezielles Programm. In der heutigen digitalen Landschaft sind PDF-Dateien für verschiedene wichtige Veröffentlichungen unverzichtbar geworden. Viele Unternehmen verlassen sich auf PDF-Dateien, um professionelle Dokumente und Rechnungen zu erstellen. Darüber hinaus greifen Entwickler häufig auf PDF-Erstellungsbibliotheken zurück, um spezifische Kundenanforderungen zu erfüllen. Der Prozess zur Erstellung von PDFs wurde durch das Aufkommen moderner Bibliotheken optimiert. Bei der Auswahl der am besten geeigneten Bibliothek für ein Projekt, das die PDF-Erstellung umfasst, ist es wichtig, Faktoren wie Bau-, Lese- und Konvertierungsfähigkeiten zu berücksichtigen, um eine nahtlose Integration und optimale Leistung sicherzustellen.

JavaScript-Bibliotheken

Betrachten Sie zum Beispiel das Szenario, in dem wir möchten, dass der Kunde mühelos eine Kopie unserer PDF-Rechnung herunterladen und ausdrucken kann. Außerdem ist es für uns entscheidend, das präzise Layout der Rechnung zu erhalten und eine einwandfreie Druckqualität sicherzustellen.

In diesem Abschnitt werden wir eine Reihe hoch angesehener JavaScript-Bibliotheken untersuchen, die sich auf die Umwandlung und Erstellung von HTML- in PDF-Dokumente spezialisiert haben und uns vielseitige Werkzeuge für eine effiziente und präzise Dokumentengenerierung und -konvertierung bieten.

1. PDFKit

PDFKit war eine PDF-Bibliothek, die zu den ersten gehörte, die in das umfangreiche Ökosystem der JavaScript-Bibliotheken eingeführt wurde. Seit seiner ersten Veröffentlichung im Jahr 2012 hat es erheblich an Popularität gewonnen, und Stand 2021 erhält es immer noch regelmäßige Upgrades.

Mit Webpack bietet PDFKit Unterstützung sowohl für Node-Bibliotheken als auch für Webbrowser, benutzerdefinierte Schriftarten und die Einbettung von Bildern.

Wie wir jedoch im Vergleich sehen werden, sind einige PDF-Bibliotheken effektiv nur PDFKit-Wrapper und vielleicht ein wenig einfacher zu bedienen als PDFKit.

Es ist keine High-Level-API für PDFKit verfügbar. Die Dokumentation ist oft auch schwierig. Es erfordert einige Gewöhnung, wie Sie vielleicht erwarten, und Sie könnten feststellen, dass die Erstellung von PDFs mit JavaScript nicht immer die einfachste Aufgabe ist.

// Requiring the necessary modules for file system and PDF document creation.
const fs = require('fs');
const PDFDocument = require('pdfkit');

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

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

// Define the output file location and start writing the PDF content to it
doc.pipe(fs.createWriteStream('Demo.pdf'));

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

// Requiring the necessary modules for file system and PDF document creation.
const fs = require('fs');
const PDFDocument = require('pdfkit');

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

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

// Define the output file location and start writing the PDF content to it
doc.pipe(fs.createWriteStream('Demo.pdf'));

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

JAVASCRIPT

2. pdfmake

Im Gegensatz zu PDFKit, das die herkömmliche imperative Methode zur Erstellung verwendet, verwendet pdfmake einen deklarativen Ansatz. Infolgedessen macht die Verwendung der pdfmake-Bibliothek es einfacher, sich auf die beabsichtigte Funktionalität der PDF-Erstellung zu konzentrieren, anstatt Zeit damit zu verschwenden, der Bibliothek beizubringen, wie ein bestimmtes Ergebnis erzielt werden soll.

Es ist wichtig zu beachten, dass, obwohl bestimmte Lösungen vielversprechend erscheinen mögen, sie möglicherweise nicht fehlerfrei sind. Ein solches Beispiel ist die Integration von benutzerdefinierten Schriftarten mit pdfmake bei der Verwendung von Webpack, was möglicherweise zu Problemen führen kann. Leider gibt es nur begrenzte Dokumentation online zu diesem spezifischen Problem. Wenn Sie jedoch nicht Webpack verwenden, können Sie das Git-Repository einfach klonen und das Schriftarteneinbettungsskript ausführen, um potenzielle Hürden bei der Integration benutzerdefinierter Schriftarten zu überwinden.

<!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 to create and print a PDF document
        function CreatePdf() {
            // Define document content and styles
            var docDefinition = {
                content: [
                    { text: "Hello world" } // Text content to be included in the PDF
                ],
                defaultStyle: {}
            };
            // Create and print the PDF using pdfMake library
            pdfMake.createPdf(docDefinition).print();
        }
    </script>
    <!-- Button to trigger PDF creation and printing -->
    <button onclick="CreatePdf()">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 to create and print a PDF document
        function CreatePdf() {
            // Define document content and styles
            var docDefinition = {
                content: [
                    { text: "Hello world" } // Text content to be included in the PDF
                ],
                defaultStyle: {}
            };
            // Create and print the PDF using pdfMake library
            pdfMake.createPdf(docDefinition).print();
        }
    </script>
    <!-- Button to trigger PDF creation and printing -->
    <button onclick="CreatePdf()">Print pdf</button>
</body>
</html>

HTML

Wie man PDF-Dateien in JavaScript erstellt: Abbildung 1

3. IronPDF

IronPDF wurde entwickelt, um Entwicklern das Erstellen, Durchsuchen und Bearbeiten von PDF-Dokumenten zu erleichtern. Es fungiert als leistungsstarker PDF-Converter und bietet eine Basis-API zur Erstellung, Bearbeitung und Verarbeitung von PDF-Dateien.

IronPDF für Node.js erleichtert den Prozess der programmatischen 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-Erstellung: Mit IronPDF können Entwickler PDFs aus verschiedenen Quellen generieren, einschließlich HTML, CSS, JavaScript, Bildern und anderen Dateitypen. Diese Flexibilität ermöglicht die Erstellung dynamischer und optisch ansprechender PDF-Dokumente, die speziell auf spezifische Anforderungen zugeschnitten sind.
Erweiterte Dokumentenanpassung: IronPDF ermöglicht es Entwicklern, PDF-Dokumente mit Funktionen wie Kopfzeilen, 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.
Sicherheitsfunktionen: IronPDF bietet robuste Sicherheitsfunktionen zum Schutz von PDFs vor unbefugtem Zugriff. 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 volle Multithreading- und asynchrone Unterstützung. Dies gewährleistet eine effiziente PDF-Erstellung und macht es geeignet für geschäftskritische Anwendungen, bei denen die Leistung entscheidend ist.
Umfassendes Funktionsangebot: Mit über 50 Funktionen zur Erstellung, Formatierung und Bearbeitung 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.

Der untenstehende Code demonstriert, wie Sie JavaScript verwenden, um HTML in eine pixelgenaue PDF-Datei zu rendern.

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

(async () => {
    // HTML content containing JavaScript to be executed upon rendering
    const htmlWithJavaScript = `<h1>This is HTML</h1>
    <script>
        document.write('<h1>This is JavaScript</h1>');
        window.ironpdf.notifyRender(); // Notify IronPDF when rendering is done
    </script>`;

    // Rendering options to enable JavaScript
    const renderOptions = {
        enableJavaScript: true,
    };

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

    // Save the PDF to a file
    await pdf.saveAs("javascript-in-html.pdf");
})();

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

(async () => {
    // HTML content containing JavaScript to be executed upon rendering
    const htmlWithJavaScript = `<h1>This is HTML</h1>
    <script>
        document.write('<h1>This is JavaScript</h1>');
        window.ironpdf.notifyRender(); // Notify IronPDF when rendering is done
    </script>`;

    // Rendering options to enable JavaScript
    const renderOptions = {
        enableJavaScript: true,
    };

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

    // Save the PDF to a file
    await pdf.saveAs("javascript-in-html.pdf");
})();

JAVASCRIPT

Sie können auch benutzerdefiniertes JavaScript ausführen, um das Erscheinungsbild von HTML-Inhalten mühelos zu ändern.

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

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

    // HTML content which will be affected by the custom JavaScript
    const htmlContent = "<h1>Happy New Year!</h1>";

    // Rendering options to enable and apply the custom JavaScript
    const renderOptions = {
        enableJavaScript: true,
        javascript: javascriptCode,
    };

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

    // Save the PDF with the applied JavaScript effects
    await pdf.saveAs("executed_js.pdf");
})();

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

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

    // HTML content which will be affected by the custom JavaScript
    const htmlContent = "<h1>Happy New Year!</h1>";

    // Rendering options to enable and apply the custom JavaScript
    const renderOptions = {
        enableJavaScript: true,
        javascript: javascriptCode,
    };

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

    // Save the PDF with the applied JavaScript effects
    await pdf.saveAs("executed_js.pdf");
})();

JAVASCRIPT

Wie man PDF-Dateien in JavaScript erstellt: Abbildung 2

Wenn wir auf die Schaltfläche 'Download' klicken, wird die PDF-Datei heruntergeladen, wie es auf der PDF-Seite des obigen Bildes gezeigt wird. Die erstellte PDF-Datei wird wie die unten gezeigte sein.

Wie man PDF-Dateien in JavaScript erstellt: Abbildung 3

Ausführlichere Tutorials finden Sie im IronPDF C#-Erschaffe-PDF-Tutorial.

Abschluss

Es sollte erwähnt werden, dass der oben gezeigte JavaScript-Code, wenn er von anderen verwendet wird, das Potenzial für Missbrauch und Sicherheitsprobleme birgt. Es ist entscheidend, die Risiken wie unbefugten Zugriff und Datensicherheitsanfälligkeiten zu berücksichtigen, wenn ein solcher Code auf einer Webseite oder Website platziert wird. Darüber hinaus ist es auch wichtig, die Notwendigkeit zu berücksichtigen, veraltete Browser zu unterstützen, die möglicherweise nicht über alle erforderlichen Funktionen und Kompatibilitätsprobleme mit verschiedenen Systemen und Browsern verfügen.

IronPDF is not only available for Node.js but also for other popular platforms including .NET, Java, and Python. Diese plattformübergreifende Verfügbarkeit sorgt für Konsistenz und Flexibilität für Entwickler, die mit verschiedenen Technologie-Stacks arbeiten. Mit seinem umfangreichen Funktionsumfang, nahtloser Integration und robuster Leistung ist IronPDF ein wertvolles Werkzeug für Entwickler, die die PDF-Erstellung in ihren Node.js-Projekten optimieren möchten.

To accommodate various developer demands, the library provides a variety of licensing options, including a free trial license and additional developer licenses that are available for purchase. Das $799 Lite-Paket umfasst eine permanente Lizenz, eine 30-tägige Geld-zurück-Garantie, ein Jahr Software-Unterstützung und Upgrade-Optionen. Es entstehen keine weiteren Kosten über den anfänglichen Kauf hinaus.

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 ...