Wie man PDF-Dateien in JavaScript erstellt

Einführung

Im Bereich der gemeinsamen Nutzung von Dokumenten ist das Portable Document Format (PDF)die von Adobe entwickelt wurde, spielt eine entscheidende Rolle bei der Bewahrung der Integrität von textreichen und visuell ansprechenden Inhalten. Der Online-Zugriff auf eine PDF-Datei erfordert normalerweise ein spezielles Programm. In der heutigen digitalen Landschaft sind PDF-Dateien für verschiedene wichtige Veröffentlichungen unverzichtbar geworden. Viele Unternehmen nutzen PDF-Dateien für die Erstellung professioneller Dokumente und Rechnungen. Darüber hinaus nutzen Entwickler oft PDF-Erstellungsbibliotheken, um spezifische Kundenanforderungen zu erfüllen. Mit dem Aufkommen moderner Bibliotheken wurde der Prozess der PDF-Erstellung rationalisiert. Bei der Auswahl der am besten geeigneten Bibliothek für ein Projekt, das die Erstellung von PDF-Dateien beinhaltet, müssen Faktoren wie Build-, Lese- und Konvertierungsfunktionen berücksichtigt werden, um eine nahtlose Integration und optimale Leistung zu gewährleisten.

JavaScript-Bibliotheken

Nehmen wir zum Beispiel das Szenario, in dem wir möchten, dass der Kunde eine Kopie unserer PDF-Rechnung mühelos herunterladen und ausdrucken kann. Darüber hinaus ist es für uns entscheidend, das exakte Layout der Rechnung beizubehalten und eine einwandfreie Druckqualität zu gewährleisten.

In diesem Abschnitt werden wir uns mit einer Reihe hoch angesehener JavaScript-Bibliotheken befassen, die sich bei der Konvertierung und Erstellung von HTML- in PDF-Dokumente auszeichnen und uns vielseitige Werkzeuge für eine effiziente und genaue Dokumentenerstellung und -konvertierung an die Hand geben.

1. PDFKit

PDFKit war eine PDF-Bibliothek, die als eine der ersten in das riesige Ökosystem der JavaScript-Bibliotheken eingeführt wurde. Seit seiner Erstveröffentlichung im Jahr 2012 hat es erheblich an Popularität gewonnen und wird auch im Jahr 2021 noch regelmäßig aktualisiert.

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

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

Für PDFKit gibt es keine High-Level-API. Auch die Dokumentation ist häufig schwierig. Wie zu erwarten, ist es gewöhnungsbedürftig, und Sie werden feststellen, dass die Erstellung von PDF-Dateien mit JavaScript nicht immer die einfachste Aufgabe ist.

// including the file system module
const fs  = require('fs');

// create a document the same way as above
const Page = new PDFDocument;

// add your content to the document here, as usual
Page.text('Hello world!');

// get a blob when you're done
Page.pipe(fs.createWriteStream('Demo.pdf'));
Page.end();

// including the file system module
const fs  = require('fs');

// create a document the same way as above
const Page = new PDFDocument;

// add your content to the document here, as usual
Page.text('Hello world!');

// get a blob when you're done
Page.pipe(fs.createWriteStream('Demo.pdf'));
Page.end();

2. pdfmake

Im Gegensatz zu PDFKit, das die konventionelle imperative Methode verwendet, um etwas zu erzeugen, verwendet pdfmake einen deklarativen Ansatz. Die Verwendung der pdfmake-Bibliothek macht es daher einfacher, sich auf die beabsichtigte Funktionalität der PDF-Produktion zu konzentrieren, anstatt Zeit damit zu verschwenden, der Bibliothek beizubringen, wie ein bestimmtes Ergebnis zu erreichen ist.

Es ist wichtig zu bedenken, dass bestimmte Lösungen, auch wenn sie vielversprechend erscheinen mögen, nicht unbedingt fehlerfrei sind. Ein solches Beispiel ist die Integration von benutzerdefinierten Schriftarten in pdfmake bei der Verwendung von Webpack, was zu Problemen führen kann. Bedauerlicherweise gibt es nur eine begrenzte Online-Dokumentation zu diesem speziellen Problem. Wenn Sie jedoch kein Webpack verwenden, können Sie einfach das Git-Repository klonen und das Skript zum Einbetten der Schriftart ausführen, um alle potenziellen Hürden zu überwinden, die mit der Integration benutzerdefinierter Schriftarten verbunden sind.

<!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 CreatePdf() {
                var doc = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                pdfMake.createPdf(doc).print();
            }
        </script>
        <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 CreatePdf() {
                var doc = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                pdfMake.createPdf(doc).print();
            }
        </script>
        <button onclick="CreatePdf()">Print pdf</button>
    </body>
</html>

3. IronPDF

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

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

  Der folgende Code zeigt, wie JavaScript-Code in HTML eingebettet sind, können in eine pixelgenaue PDF-Datei gerendert werden:

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

(async () => {
   // Define the JavaScript code to change text color to red
   const htmlWithJavaScript = `<h1>This is HTML</h1>
   <script>
       document.write('<h1>This is JavaScript</h1>');
       window.ironpdf.notifyRender();
   </script>`;

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

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

   // Save the PDF with the executed JavaScript
   await pdf.saveAs("javascript-in-html.pdf");
})();

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

(async () => {
   // Define the JavaScript code to change text color to red
   const htmlWithJavaScript = `<h1>This is HTML</h1>
   <script>
       document.write('<h1>This is JavaScript</h1>');
       window.ironpdf.notifyRender();
   </script>`;

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

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

   // Save the PDF with the executed JavaScript
   await pdf.saveAs("javascript-in-html.pdf");
})();

Sie können auch Folgendes ausführen benutzerdefiniertes JavaScript die mühelos das Aussehen von HTML-Inhalten mit JavaScript-Code verändern:

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>Happy New Year!</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("executed_js.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>Happy New Year!</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("executed_js.pdf");
})();

Wenn wir auf die Schaltfläche "Herunterladen" klicken, wird die PDF-Datei heruntergeladen, wie sie auf der PDF-Seite des obigen Bildes zu sehen ist. Die erstellte PDF-Datei sieht dann so aus wie die folgende.

Ausführlichere Anleitungen finden Sie unter hier.

Schlussfolgerung

Es sollte erwähnt werden, dass der oben gezeigte JavaScript-Code, wenn er von anderen verwendet wird, das Potenzial für Missbrauch und Sicherheitsprobleme hat. Bei der Platzierung eines solchen Codes auf einer Webseite oder einem Internetauftritt müssen Gefahren wie unbefugter Zugriff und Schwachstellen in der Datensicherheit berücksichtigt werden. Außerdem ist es wichtig zu berücksichtigen, dass veraltete Browser unterstützt werden müssen, die möglicherweise nicht über alle erforderlichen Funktionen und Kompatibilitätsprobleme mit verschiedenen Systemen und Browsern verfügen.

IronPDF ist nicht nur für Node.js, sondern auch für andere populäre Plattformen verfügbar .NET, Javaund Python. Diese plattformübergreifende Verfügbarkeit gewährleistet Konsistenz und Flexibilität für Entwickler, die über verschiedene Technologie-Stacks hinweg arbeiten. Mit seinem reichhaltigen Funktionsumfang, der nahtlosen Integration und der robusten Leistung ist IronPDF ein wertvolles Werkzeug für Entwickler, die die PDF-Erzeugung in ihren Node.js-Projekten rationalisieren möchten.

Um den unterschiedlichen Anforderungen von Entwicklern gerecht zu werden, bietet die Bibliothek eine Vielzahl von Lizenzierungsoptionen, darunter eine kostenloser Test lizenz und zusätzlicher Entwickler lizenzen die zum Kauf angeboten werden. Das $749 Lite-Paket enthält eine permanente Lizenz, eine 30-Tage-Geld-zurück-Garantie, ein Jahr Software-Support und Upgrade-Optionen. Über den Erstkauf hinaus fallen keine weiteren Kosten an.