Wie man PDF-Dateien mit JavaScript generiert
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 erzeugen PDFs von Dokumenten, um Kundenbedürfnisse zu erfüllen. 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.
Schritte zur Generierung von PDF-Dateien in JavaScript
- Verwenden Sie die Methode `text` der PDFKit-Bibliothek, um Text in die PDF-Datei einzufügen
- Verwenden Sie die Methode `createPdf` der pdfmake-Bibliothek in JavaScript
- Instanziieren Sie die jsPDF-Klasse aus der jsPDF-Bibliothek, um die PDF-Datei zu erstellen
- Übergabe von Konfigurationen an die Methode `html2pdf` der html2pdf-Bibliothek
- Verwenden Sie die Methode `RenderHtmlAsPdf` 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();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>Das Ergebnis des oben genannten Codes wird unten angezeigt.
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>Das Ergebnis des obigen Codes wird unten angezeigt.
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
getElementByIdverwenden, 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 auf Ihrer HTML-Seite eine Schaltfläche ein, die beim Anklicken die Funktion
generatePDFauslö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() {
// 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>Unten ist das Ergebnis des obigen Codes.
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 das Erstellen, Hochladen und Aktualisieren neuer und vorhandener PDF-Formulare.
Hauptmerkmale von IronPDF for 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");
})();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 angegeben, der ein <h1>-Element mit dem Text "Hello World!!" enthält. 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.
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.
Die Bibliothek bietet verschiedene Lizenzoptionen, um den unterschiedlichen Bedürfnissen der Entwickler gerecht zu werden, einschließlich einer kostenlosen Testlizenz für Entwickler und zusätzlichen Lizenzen, die käuflich erworben werden können. Das Lite Paket zum Preis von $999 beinhaltet eine dauerhafte Lizenz, ein Jahr Produktsupport und Upgrade-Optionen ohne wiederkehrende Gebühren. Diese Lizenzen können in Entwicklungs-, Staging- und Produktionsumgebungen eingesetzt werden. Zusätzlich steht sie auch für andere Sprachen wie C# .NET, Java und Python zur Verfügung. Besuchen Sie die IronPDF-Website für weitere Informationen.
Kostenlos loslegen
Kostenlos loslegen
Kostenlose Live-Demo buchen
Ihr Testlizenzschlüssel wurde Ihnen per E-Mail gesendet.
