Wie man mit JavaScript eine PDF-Datei erzeugt

1.0 Einführung

Adobe entwickelte das Portable Document Format (PDF) zur Freigabe von Dokumenten mit Text und Grafiken. Um eine PDF-Datei online zu öffnen, ist ein zusätzliches Programm erforderlich. In der modernen Welt sind PDF-Dateien für wichtige Dokumente sehr wichtig. Für die Erstellung von Dokumenten und Rechnungen verwenden viele Unternehmen PDF-Dateien. Die Entwickler erstellen und generieren PDF-Dokumente, die den Anforderungen der Kunden entsprechen. Die Erstellung von PDFs war dank moderner Bibliotheken noch nie so einfach. Bei der Auswahl der idealen Bibliothek für ein Projekt müssen wir eine Reihe von Faktoren berücksichtigen, darunter die Erstellungs-, Lese- und Konvertierungsfunktionen der Bibliothek.

In diesem Artikel werden wir verschiedene JavaScript-Bibliotheken für die PDF-Erstellung besprechen. Wir werden die Funktionen und Anwendungsfälle der JS-Bibliothek untersuchen und uns dabei auf drei Hauptaspekte konzentrieren:

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

• Benutzerfreundlichkeit

  Am Ende dieses Artikels werden Sie in der Lage sein, die am besten geeignete PDF-Bibliothek für Ihre JavaScript-Anwendung auszuwählen. Außerdem stellen wir IronPDF vor, eine leistungsstarke und praktische PDF-Bibliothek.

  Schritte zur Erzeugung von PDF-Dateien in Javscript

  1. Verwenden Sie die text-Methode der PDFKit-Bibliothek, um Text in das PDF einzufügen
  2. Nutzen Sie die createPdf-Methode der pdfmake-Bibliothek in JavaScript
  3. Instanziieren Sie die jsPDF-Klasse aus der jsPDF-Bibliothek, um das PDF zu erstellen
  4. Konfigurationen an die html2pdf-Methode der html2pdf-Bibliothek übergeben
  5. Verwenden Sie die RenderHtmlAsPdf-Methode aus der IronPDF-Bibliothek

2.0 Bibliotheken

Angenommen, wir möchten, dass der Kunde eine von uns erstellte Rechnung herunterladen und ausdrucken kann. Wir wollen auch, dass diese Rechnung richtig gedruckt wird, mit guter Formatierung. Hier sehen wir uns einige der beliebtesten Bibliotheken für die Konvertierung dieser Rechnung vom HTML-Format in PDF an.

2.1 PDFKit

Eine der ersten PDF-Bibliotheken, die in das umfangreiche JavaScript-Ökosystem eingeführt wurde, ist PDFKit. Seit seiner Erstveröffentlichung im Jahr 2012 hat es erheblich an Popularität gewonnen und wird auch 2021 noch regelmäßig aktualisiert. PDFKit unterstützt sowohl Node.js als auch Webbrowser über Webpack, obwohl es im Vergleich zu anderen hier besprochenen Bibliotheken etwas komplexer sein kann. Darüber hinaus sind bestimmte PDF-Bibliotheken, wie wir im Vergleich feststellen werden, im Wesentlichen Wrapper für PDFKit.

Benutzerdefinierte Schriftarten und das Einbetten von Bildern werden unterstützt, es gibt jedoch keine API auf hoher Ebene. Außerdem ist die Dokumentation häufig kompliziert. Wie Sie sich vorstellen können, ist es gewöhnungsbedürftig, und anfangs werden Sie feststellen, dass die Erstellung von PDFs nicht ganz einfach ist.

const PDFDocument = require('pdfkit');
const fs  = require('fs');
// create a document the same way as above
const doc = new PDFDocument;
// add your content to the document here, as usual
doc.text('Hello world!');
// get a blob when you're done
doc.pipe(fs.createWriteStream('Demo.pdf'));
doc.end();

const PDFDocument = require('pdfkit');
const fs  = require('fs');
// create a document the same way as above
const doc = new PDFDocument;
// add your content to the document here, as usual
doc.text('Hello world!');
// get a blob when you're done
doc.pipe(fs.createWriteStream('Demo.pdf'));
doc.end();

2.2 pdfmake

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

pdfmake verfolgt einen deklarativen Ansatz, während PDFKit der traditionellen imperativen Technik folgt. Daher ist es mit der pdfmake-Bibliothek einfacher, sich auf die gewünschte Funktionalität der PDF-Erzeugung zu konzentrieren, als Zeit damit zu verbringen, der Bibliothek Anweisungen zu geben, wie ein bestimmtes Ergebnis zu erreichen ist.

Allerdings ist nicht alles, was vielversprechend erscheint, auch einwandfrei. Die Verwendung von Webpack und der Versuch, benutzerdefinierte Schriftarten in pdfmake zu integrieren, kann möglicherweise zu Problemen führen. Leider gibt es online nur wenige Informationen zu diesem Problem. Wenn Sie Webpack nicht verwenden, können Sie trotzdem mühelos das Git-Repository klonen und das Skript zum Einbetten der Schriftart 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() {
                var docDefinition = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                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() {
                var docDefinition = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                pdfMake.createPdf(docDefinition).print();
            }
        </script>
        <button onclick="downloadPdf()">Print pdf</button>
    </body>
</html>

Die Ausgabe des oben genannten Ergebnisses wird unten angezeigt.

2.3 jsPDF

jsPDF ist ein Open-Source-Paket, das ausschließlich reines JavaScript zur Erzeugung von PDF-Dateien verwendet. Es erstellt eine PDF-Seite und formatiert sie auf der Grundlage der von Ihnen vorgegebenen Formatierung. jsPDF ist die am weitesten verbreitete PDF-Bibliothek auf GitHub und ist sehr zuverlässig und gut gewartet. Es bietet einfach zu verwendende Module sowohl für Node.js als auch für Webbrowser, da sie nach dem AMD-Modulstandard exportiert werden.

Die APIs von PDFKit folgen einem imperativen Paradigma, was die Gestaltung komplexer Layouts schwierig machen kann. Was das Einbetten von Schriften betrifft, so 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() {
                var pdf = new jsPDF({
                    orientation: 'p',
                    unit: 'mm',
                    format: 'a5',
                    putOnlyUsedFonts:true
                    });
                pdf.text("Hello World", 20, 20);
                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() {
                var pdf = new jsPDF({
                    orientation: 'p',
                    unit: 'mm',
                    format: 'a5',
                    putOnlyUsedFonts:true
                    });
                pdf.text("Hello World", 20, 20);
                pdf.save('Demopdf.pdf');
            }
        </script>
    </head>
    <body>
        <button onclick="generatePDF()">print Pdf</button>
    </body>
</html>

Die Ausgabe des obigen Codes ist unten dargestellt.

2.4 html2pdf

Um Webseiten und Templates in PDF-Dateien zu konvertieren, kombiniert html2pdf die Funktionalitäten von jsPDF und Html2Canvas in einem einzigen Modul.

Gehen Sie folgendermaßen vor, um Ihre Website in eine PDF-Datei umzuwandeln:

1. Installieren Sie die html2pdf JavaScript-Bibliothek mit NPM lokal auf Ihrem Server oder binden Sie sie in Ihren HTML-Code ein, wie im folgenden Beispiel gezeigt:

2. Fügen Sie eine "PDF generieren"-Funktion hinzu, die aufgerufen wird, um das angegebene Segment der Webseite in ein PDF zu konvertieren. Sie können die getElementById-Methode verwenden, um das gewünschte Segment auszuwählen.

3. Passen Sie die Formatierungsoptionen an, indem Sie sie der Variablen "opt" hinzufügen, bevor Sie sie an html2pdf übergeben. Hier können Sie verschiedene Einstellungen für die PDF-Erstellung vornehmen.

4. Fügen Sie eine Schaltfläche auf Ihrer HTML-Seite hinzu, die beim Klicken die generatePDF-Funktion auslöst.

<!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() {
    const page = 'Hello World!';
    var opt = {
        margin:       1,
        filename:     'Demopdf.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2 },
        jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    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() {
    const page = 'Hello World!';
    var opt = {
        margin:       1,
        filename:     'Demopdf.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2 },
        jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    html2pdf().set(opt).from(page).save();
    }
    </script>
    </head>
    <body>
    <button onclick="generatePDF()">print Pdf</button>
</body>
</html>

Nachfolgend sehen Sie die Ausgabe des obigen Codes.

2.5 IronPDF

IronPDF für Node.js vereinfacht den Prozess der programmgesteuerten Erstellung und Anpassung von PDF-Dokumenten. IronPDF for Node.js ist eine robuste Lösung für die PDF-Erzeugung in Node.js-Umgebungen und wurde von Iron Software entwickelt, einem zuverlässigen Anbieter von Hochleistungsbibliotheken für die Dokumentenverarbeitung. Sie lässt sich nahtlos in Node.js-Projekte integrieren und bietet Entwicklern leistungsstarke Werkzeuge zum einfachen Generieren, Formatieren und Bearbeiten von PDFs.

Die IronPDF-Bibliothek verfügt über eine breite Palette von Funktionen, einschließlich der Möglichkeit, Seiten in neuen oder bestehenden PDF-Dokumenten aufzuteilen und zu kombinieren, bestehende 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 - und das alles, ohne den Acrobat Reader zu benötigen. Aus CSS- und CSS-Mediendateien können PDF-Dokumente erstellt werden. Mit IronPDF können Benutzer sowohl neue als auch bereits vorhandene PDF-Formulare erstellen, hochladen und aktualisieren.

Hauptmerkmale von IronPDF for Node.js:

• Vielseitige PDF-Erzeugung: Mit IronPDF können Entwickler PDFs aus verschiedenen Quellen wie HTML, CSS, JavaScript, Bildern und anderen Dateitypen erzeugen. Diese Flexibilität ermöglicht die Erstellung dynamischer und visuell ansprechender PDF-Dokumente, die auf spezifische Anforderungen zugeschnitten sind.
• Erweiterte Dokumentanpassung: IronPDF bietet Entwicklern die Möglichkeit, PDF-Dokumente mit Funktionen wie Kopf- und Fußzeilen, Anhängen, digitalen Signaturen, Wasserzeichen und Lesezeichen zu versehen. Dies ermöglicht die Erstellung professioneller PDF-Dateien mit umfangreichen Inhalten und interaktiven Elementen.
• Sicherheitsfunktionen: IronPDF bietet robuste Sicherheitsfunktionen, um PDFs vor unbefugtem Zugriff zu schützen. Entwickler können Sicherheitsmaßnahmen wie Kennwörter, digitale Signaturen, Metadaten und andere Sicherheitseinstellungen implementieren, um sensible Informationen in PDF-Dokumenten zu schützen.

• Optimierte Leistung: IronPDF ist auf optimale Leistung ausgelegt und bietet vollständige Multithreading- und asynchrone Unterstützung. Dies gewährleistet eine effiziente PDF-Erzeugung und eignet sich daher für unternehmenskritische Anwendungen, bei denen die Leistung im Vordergrund steht.

  Umfassender Funktionsumfang: 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 einfachen Dokumentenerstellung bis hin zu fortgeschrittener Anpassung und Sicherheit bietet IronPDF eine breite Palette von Funktionen, die den Anforderungen von Entwicklern gerecht werden.

  Um eine PDF-Datei mithilfe von benutzerdefiniertem JavaScript zu erstellen, werfen Sie einen Blick auf den folgenden Code, der den HTML-Inhalt mühelos ansprechender gestaltet:

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");
})();

Im obigen Code wird zunächst ein JavaScript-Codeausschnitt definiert, um die Farbe aller <h1>-Elemente in Rot zu ändern. Dieser Code wird dann zusammen mit der Aktivierung der JavaScript-Ausführung in die Rendering-Optionen integriert. 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 Rendering-Optionen erzeugt, 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, so dass Entwickler individuelle und interaktive PDF-Dokumente programmgesteuert erstellen können.

3.0 Schlussfolgerung

Zusammenfassend lässt sich sagen, dass der oben vorgestellte JavaScript-Code missbraucht werden kann und potenzielle Sicherheitsrisiken birgt, wenn er von anderen verwendet wird. Bei der Implementierung eines solchen Codes auf einer Website ist es wichtig, die Möglichkeit eines unbefugten Zugriffs und die Schwachstellen der Datensicherheit zu berücksichtigen. Auch Kompatibilitätsprobleme zwischen verschiedenen Browsern und Plattformen sollten berücksichtigt werden, einschließlich der Notwendigkeit, die Unterstützung älterer Browser zu gewährleisten, die möglicherweise nicht über alle erforderlichen Funktionen verfügen.

Im Gegensatz dazu bietet die IronPDF for Node.js-Bibliothek erweiterte Sicherheitsmaßnahmen zum Schutz vor potenziellen Bedrohungen. Sie ist nicht von bestimmten Browsern abhängig und mit allen gängigen Browsern kompatibel. Mit nur wenigen Codezeilen können Entwickler mit IronPDF problemlos PDF-Dateien erstellen und lesen.

Die Bibliothek bietet verschiedene Lizenzoptionen, um den unterschiedlichen Bedürfnissen von Entwicklern gerecht zu werden, einschließlich einer kostenlosen Testlizenz für Entwickler sowie zusätzlichen Lizenzen, die käuflich erworben werden können. Das Lite-Paket, das zum Preis von $749 erhältlich ist, umfasst eine dauerhafte Lizenz, ein Jahr Produktsupport und Upgrade-Optionen, ohne wiederkehrende Gebühren. Diese Lizenzen können in Entwicklungs-, Staging- und Produktionsumgebungen verwendet werden. Zusätzlich ist es auch für andere Sprachen wie C# .NET, Java und Python verfügbar. Besuchen Sie die IronPDF Website für weitere Details.