HTML zu PDF NodeJS
die Fähigkeit, aus HTML-, CSS- und JavaScript-Rohdaten originalgetreue PDF-Dateien zu erstellen, ist die leistungsfähigste und beliebteste Funktion von IronPDF. Dieses Tutorial ist ein umfassender Leitfaden, der Node-Entwicklern hilft, IronPDF zu nutzen, um HTML-zu-PDF-Generierung in ihre eigenen Projekte einzubinden
ironPDF ist eine High-Level-API-Bibliothek, die Entwicklern hilft, leistungsstarke und robuste PDF-Verarbeitungsfunktionen schnell und einfach in Softwareanwendungen zu implementieren. IronPDF ist verfügbar inmehrere Programmiersprachen. Für detaillierte Anleitungen zur Erstellung von PDFs in.NET, JavaundPython, die offizielle Dokumentation zu Rate ziehenseiten. Dieses Tutorial behandelt die Verwendung in Node.js-Projekten
Wie man HTML in Node.js in PDF umwandelt
- Installieren Sie die HTML to PDF Node-Bibliothek über NPM:
npm install @ironsoftware/ironpdf. - Importieren Sie die PdfDocument klasse aus der
@ironsoftware/ironpdfpaket. - Konvertieren von HTML-Strings, Dateien oder Web-URLs.
- (optional) Kopf- und Fußzeilen hinzufügen, Seitengröße, Ausrichtung und Farbe ändern.
- Rufen Sie an
PdfDocument.saveAsum das erzeugte PDF zu speichern
Erste Schritte
Beginnen Sie noch heute mit der Verwendung von IronPDF in Ihrem Projekt mit einer kostenlosen Testversion.
Installieren Sie die IronPDF-Bibliothek für Node.js
Installieren Sie das IronPDF for Node.js-Paket, indem Sie den unten angegebenen NPM-Befehl in Ihrem gewählten Node-Projekt ausführen:
npm install @ironsoftware/ironpdfSie können auch das IronPDF-Paket herunterladen und installierenmanuell.
Manuelle Installation der IronPDF Engine (optional)
IronPDF for Node.js erfordert derzeit eineIronPDF Engine binär richtig zu funktionieren.
Installieren Sie die IronPDF Engine-Binärdatei, indem Siedie Installation des entsprechenden Pakets für Ihr Betriebssystem:
Bitte beachten Sie
@ironpdf bei der ersten Ausführung automatisch die richtige Binärdatei für Ihren Browser und Ihr Betriebssystem von NPM herunterladen und installieren wird. Die explizite Installation dieser Binärdatei ist jedoch in Situationen, in denen der Zugang zum Internet begrenzt, eingeschränkt oder unerwünscht ist, unerlässlich.Einen Lizenzschlüssel anwenden (optional)
Standardmäßig versieht IronPDF alle Dokumente, die es erstellt oder ändert, mit einem Wasserzeichen im Hintergrund.
**Erwerben Sie einen Lizenzschlüssel unter ironpdf.com/nodejs/licensing/, um PDF-Dokumente ohne Wasserzeichen zu erzeugen
Um IronPDF ohne das hinzugefügte Wasserzeichen zu verwenden, müssen Sie die Eigenschaft licenseKey im globalen Objekt IronPdfGlobalconfig mit einem gültigen Lizenzschlüssel versehen. Der Quellcode für diese Funktion ist unten angegeben:
import {IronPdfGlobalConfig} from "@ironsoftware/ironpdf";
var config = IronPdfGlobalConfig.getConfig();
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";Kaufen Sie einen Lizenzschlüssel von unserer Lizenzierungsseite, oder kontaktieren Sie uns, umeinen kostenlosen Testlizenzschlüssel erhalten.
Bitte beachten Sie
In den weiteren Abschnitten dieses Tutorials wird davon ausgegangen, dass wir einen Lizenzschlüssel haben und ihn in einer separaten JavaScript-Datei namens config.js festgelegt haben. Wir importieren dieses Skript überall dort, wo wir die IronPDF-Funktionen nutzen wollen:
import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');
// ...HTML in PDF umwandeln
Die Node-Version der IronPDF Library bietet drei Ansätze zur Erstellung von PDF-Dateien aus HTML-Inhalten:
Aus einer Kette von HTML-Code
Aus einer lokalen HTML-Datei
Von einer Online-Website
In diesem Abschnitt werden alle drei Methoden im Detail erläutert.
Erstellen einer PDF-Datei aus einem HTML-String
pdfDocument.fromHtml" ist eine Methode, mit der Sie PDFs aus Zeichenketten mit rohen Webseitenauszeichnungen erzeugen können.
Diese Methode bietet die größte Flexibilität unter den drei Ansätzen. Der Grund dafür ist, dass die Daten in der HTML-Zeichenkette praktisch überall herkommen können: aus Textdateien, Datenströmen, einer HTML-Vorlage, generierten HTML-Daten usw.
Das folgende Codebeispiel zeigt, wie die Methode "pdfDocument.fromHtml" in der Praxis verwendet wird:
import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');
// Create a PDF from the HTML String "Hello world!"
const pdf = await PdfDocument.fromHtml("<h1>Hello from IronPDF!</h1>");
// Save the PDF document to the file system.
await pdf.saveAs("html-string-to-pdf.pdf");Wie oben gezeigt, rufen wir die Methode PdfDocument.fromHtml mit einer Zeichenkette auf, die den Markup-Code für ein Überschriftenelement der Ebene 1 enthält.
pdfDocument.fromHtml" gibt ein Promise zurück, das in eine Instanz derpdfDocument klasse. Ein PdfDocument stellt eine PDF-Datei dar, die die Bibliothek aus einem Quellinhalt erzeugt hat. Diese Klasse bildet den Grundstein für die meisten Kernfunktionen von IronPDF und ist die Grundlage für die Erstellung und Bearbeitung von PDF-Dokumenten in vielen Anwendungsfällen.
Schließlich verwenden wir die Methode "SaveAs" für das "PdfDocument", um die Datei auf der Festplatte zu speichern. Die gespeicherte PDF-Datei ist unten abgebildet.
Das PDF, das aus der HTML-Zeichenfolge "Hallo von IronPDF!
". Die PDF-Dateien, diePdfDocument.fromHtml` erzeugt, erscheinen genauso wie der Inhalt einer Webseite erscheinen würde.
Erstellen einer PDF-Datei aus einer HTML-Datei
pdfDocument.fromHtml" funktioniert nicht nur mit HTML-Strings. Die Methode akzeptiert auch einen Pfad zu einem lokalen HTML-Dokument.
In unserem nächsten Beispiel werden wir mit diesem Beispiel arbeitenbeispiel-Webseite.
Unsere HTML-Beispielseite, wie sie in Google Chrome erscheint. Laden Sie diese Seite und ähnliche Seiten von der File Samples Website herunter: https://filesamples.com/samples/code/html/sample2.html
Die folgenden Codezeilen wandeln das gesamte Beispieldokument in eine PDF-Datei um. Anstelle einer HTML-Zeichenkette rufen wir PdfDocument.fromHtml mit einem gültigen Dateipfad zu unserer Beispieldatei auf:
import {PdfDocument} from "@websiteironsoftware/ironpdf";
import('./config.js');
// Render a PDF from an HTML File
const pdf = await PdfDocument.fromHtml("./sample2.html");
// Save the PDF document to the same folder as our project.
await pdf.saveAs("html-file-to-pdf-1.pdf");Nachfolgend finden Sie den Inhalt der daraus resultierenden PDF-Datei. Beachten Sie, dass IronPDF nicht nur das Aussehen des ursprünglichen HTML-Dokuments beibehält, sondern auch die Funktionalität von Links, Formularen und anderen gängigen interaktiven Elementen.
Diese PDF-Datei wurde aus dem vorherigen Code-Beispiel generiert. Vergleichen Sie sein Aussehen mit dem vorherigen Bild und beachten Sie die bemerkenswerte Ähnlichkeit!
Wenn Sie sich den Quellcode der Beispielseite angesehen haben, werden Sie feststellen, dass er komplexer ist. Es werden mehrere Arten von HTML-Elementen verwendet(absätze, ungeordnete Listen, Zeilenumbrüche, horizontale Regeln, Hyperlinks, Bilder, usw.) und beinhaltet auch ein gewisses Maß an Skripting(für das Setzen von Cookies verwendet).
IronPDF ist in der Lage, Webinhalte zu rendern, die weitaus komplexer sind als das, was wir bisher verwendet haben. Um dies zu verdeutlichen, betrachten wir die folgende Seite:
Ein Artikel über Puppeteer, eine Node-Bibliothek, die für ihre Fähigkeit bekannt ist, Chrome programmatisch über eine Headless-Browser-Instanz zu steuern
Die oben abgebildete Seite stammt aus einem Artikel über die Puppeteer Node Library. Puppeteer führt Headless-Browser-Sitzungen aus, die Node-Entwickler zur Automatisierung zahlreicher Browseraufgaben auf der Server- oder Client-Seite verwenden(eine davon umfasst die serverseitige HTML-PDF-Generierung).
Die neue Seite enthält zahlreiche Quellen(CSS-Dateien, Bilder, Skriptdateien, usw.) und verwendet ein noch komplexeres Layout. Für das nächste Beispiel werden wir eine gespeicherte Kopie dieser Seite konvertieren(zusammen mit seinen Quellwerten) in eine pixelgenaue PDF-Datei.
Der nachstehende Codeschnipsel geht davon aus, dass die Seite im gleichen Verzeichnis wie unser Projekt als "sample4.html" gespeichert ist:
// Render a from even more complex HTML code.
PdfDocument.fromHtml("./sample4.html").then((pdf) async {
return await pdf.saveAs("html-file-to-pdf-2.pdf");
});Das folgende Bild zeigt die Ergebnisse des obigen Code-Schnipsels.
Wenn es in Google Chrome gut aussieht, wird es auch bei der Konvertierung in ein PDF gut aussehen. Dazu gehören CSS- und JavaScript-lastige Seitendesigns.
Erstellen einer PDF-Datei aus einer URL
IronPDF kann HTML-Strings und HTML-Dateien beliebiger Größe und Komplexität konvertieren. Sie sind jedoch nicht auf die Verwendung von Rohauszeichnungen aus Zeichenketten und Dateien beschränkt. IronPDF kann auch HTML von einer URL anfordern.
Siehe den Wikipedia-Artikel unter der Adressehttps://en.wikipedia.org/wiki/PDF.
Der Wikipedia-Artikel über das PDF-Format, wie es in einem standardkonformen Webbrowser erscheint.
Verwenden Sie diesen Quellcode, um diesen Wikipedia-Artikel in eine PDF-Datei zu konvertieren:
import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');
// Convert the Web Page to a pixel-perfect PDF file.
const pdf = await PdfDocument.fromUrl("https://en.wikipedia.org/wiki/PDF");
// Save the document.
await pdf.saveAs("url-to-pdf.pdf");Oben haben wir PdfDocument.fromUrl verwendet, um die Webseite in wenigen Zeilen Code in eine PDF-Datei zu konvertieren. IronPDF übernimmt den HTML-Code der Webadresse für Sie und rendert ihn nahtlos. Es sind keine HTML-Dateien oder Textstrings erforderlich!
Die PDF-Datei, die durch den Aufruf von PdfDocument.fromUrl für einen Wikipedia-Artikel erzeugt wird. Beachten Sie die Ähnlichkeiten mit der Original-Webseite.
Erstellen einer PDF-Datei aus einem Zip-Archiv
Verwenden Sie PdfDocument.fromZip, um eine bestimmte HTML-Datei zu konvertieren, die in einem komprimierten(zip) datei in eine PDF-Datei.
Nehmen wir zum Beispiel an, dass wir im Projektverzeichnis eine Zip-Datei mit der folgenden internen Struktur haben:
html-zip.zip
├─ index.html
├─ style.css
├─ logo.pngDie Datei index.html enthält den Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello world!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello from IronPDF!</h1>
<a href="https://ironpdf.com/nodejs/">
<img src="logo.png" alt="IronPDF for Node.js">
</a>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello world!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello from IronPDF!</h1>
<a href="https://ironpdf.com/nodejs/">
<img src="logo.png" alt="IronPDF for Node.js">
</a>
</body>
</html>style.css deklariert fünf CSS-Regeln:
@font-face {
font-family: 'Gotham-Black';
src: url('gotham-black-webfont.eot?') format('embedded-opentype'), url('gotham-black-webfont.woff2') format('woff2'), url('gotham-black-webfont.woff') format('woff'), url('gotham-black-webfont.ttf') format('truetype'), url('gotham-black-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
margin-bottom: auto;
color: white;
background-color: black;
text-align: center;
font-family: "Helvetica"
}
h1 {
font-family: "Gotham-Black";
margin-bottom: 70px;
font-size: 32pt;
}
img {
width: 400px;
height: auto;
}
p {
text-decoration: underline;
font-size: smaller;
}Die Datei logo.png schließlich zeigt unser Produktlogo:
*Das Beispielbild in einer hypothetischen HTML-Zip-Datei
Beim Aufruf der Methode fromZip geben Sie im ersten Argument einen gültigen Pfad zur Zip-Datei an, zusammen mit einem JSON-Objekt, das die Eigenschaft mainHtmlFile mit dem Namen der HTML-Datei aus der Zip-Datei setzt, die wir konvertieren wollen.
Wir konvertieren die Datei index.html im Zip-Ordner auf die gleiche Weise:
import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');
// Render the HTML string
PdfDocument.fromZip("./html-zip.zip", {
mainHtmlFile: "index.html"
}).then(async (pdf) => {
return await pdf.saveAs("html-zip-to-pdf.pdf");
});
**PDF-Erstellung mit der Funktion "PDFDocument.fromZip". Diese Funktion rendert erfolgreich den in der ZIP-Datei enthaltenen HTML-Code mit den darin enthaltenen Assets
Erweiterte Optionen für die Generierung von HTML in PDF
DiechromePdfRenderOptions schnittstelle ermöglicht es Node-Entwicklern, das HTML-Rendering-Verhalten der Bibliothek zu ändern. Mit den dort verfügbaren Eigenschaften lässt sich das Erscheinungsbild von PDFs vor dem PDF-Rendering detailliert anpassen. Darüber hinaus ermöglichen sie die Behandlung spezieller Grenzfälle der HTML-PDF-Konvertierung.
IronPDF rendert neue PDFs anfangs mit einigen Standardwerten für ChromePdfRenderOptions. Sie können diese voreingestellten Werte selbst abfragen, indem Sie die Funktion defaultChromePdfRenderOptions aufrufen:
// Retrieve a ChromePdfRenderOptions object with default settings.
var options = defaultChromePdfRenderOptions();In diesem Abschnitt werden die gängigsten Anwendungsfälle für das HTML-zu-PDF-Rendering, die die Verwendung der Schnittstelle "ChromePdfRenderOptions" erfordern, kurz erläutert.
Jeder Unterabschnitt beginnt mit den voreingestellten Werten und ändert sie nach Bedarf, um das angestrebte Ergebnis zu erreichen.
Anpassen der PDF-Ausgabe
Benutzerdefinierte Kopf- und Fußzeilen hinzufügen
Mit den Eigenschaften "textHeader" und "textFooter" können Sie neu gerenderten PDFs benutzerdefinierte Kopf- und/oder Fußzeileninhalte hinzufügen.
Im folgenden Beispiel wird eine PDF-Version der Google-Suchstartseite mit einer benutzerdefinierten Kopf- und Fußzeile aus Textinhalten erstellt. Wir verwenden Trennlinien, um diesen Inhalt vom Hauptteil der Seite zu trennen. Außerdem verwenden wir unterschiedliche Schriftarten in der Kopf- und Fußzeile, um die Unterscheidung deutlicher zu machen.
import {PdfDocument, defaultChromePdfRenderOptions, AffixFonts} from "@ironsoftware/ironpdf";
import('./config.js');
var options = defaultChromePdfRenderOptions();
// Build a Custom Text-Based Header
options.textHeader = {
centerText: "https://www.adobe.com",
dividerLine: true,
font: AffixFonts.CourierNew,
fontSize: 12,
leftText: "URL to PDF"
};
// Build a custom Text-Based Footer
options.textFooter = {
centerText: "IronPDF for Node.js",
dividerLine: true,
fontSize: 14,
font: AffixFonts.Helvetica,
rightText: "HTML to PDF in Node.js"
};
// Render a PDF from an HTML File
PdfDocument.fromUrl("https://www.google.com/", {renderOptions: options}).then(async (pdf) => {
return await pdf.saveAs("add-custom-headers-footers-1.pdf");
});Der Quellcode erzeugt dieses PDF:
Eine neue Seite wurde im PDF-Format erstellt, die von der Google-Homepage generiert wurde. Beachten Sie die Aufnahme zusätzlicher Kopf- und Fußzeilen.
Um noch mehr Kontrolle über das Layout, die Positionierung und den Inhalt der Kopf- und Fußzeilen zu erhalten, können Sie diese auch mit Roh-HTML anstelle von Text definieren.
Im folgenden Codeblock verwenden wir HTML, um umfangreichere Inhalte in die Kopf- und Fußzeile einzubinden. In der Kopfzeile wird die URL der Seite fett gedruckt und mittig ausgerichtet; in der Fußzeile wird ein Logo eingebettet und zentriert.
import {PdfDocument, defaultChromePdfRenderOptions} from "@ironsoftware/ironpdf";
import('./config.js');
var options = defaultChromePdfRenderOptions();
options.htmlHeader = {
htmlFragment: "<strong>https://www.google.com/</strong>",
dividerLine: true,
dividerLineColor: "blue",
loadStylesAndCSSFromMainHtmlDocument: true,
};
options.htmlFooter = {
htmlFragment: "<img src='logo.png' alt='IronPDF for Node.js' style='display: block; width: 150px; height: auto; margin-left: auto; margin-right: auto;'>",
dividerLine: true,
loadStylesAndCSSFromMainHtmlDocument: true
};
// Render a PDF from an HTML File
await PdfDocument.fromUrl("https://www.google.com/", {renderOptions: options}).then(async (pdf) => {
return await pdf.saveAs("add-html-headers-footers.pdf");
});Die folgende Abbildung zeigt das Ergebnis dieser Änderungen.
**IronPDF for Node.js kann Ihre HTML-Seiten bei der Konvertierung in PDFs anpassen
Ränder, Seitengrößen, Seitenausrichtung und Farbe festlegen
IronPDF unterstützt zusätzliche Einstellungen für die Definition von benutzerdefinierten Seitenrändern, Seitengrößen und Seitenausrichtungen für frisch konvertierte PDFs.
import {PdfDocument, defaultChromePdfRenderOptions, PaperSize, FitToPaperModes, PdfPaperOrientation} from "@ironsoftware/ironpdf";
import('./config.js');
var options = defaultChromePdfRenderOptions();
// Set top, left, right, and bottom page margins in millimeters.
options.margin = {
top: 50,
bottom: 50,
left: 60,
right: 60
};
options.paperSize = PaperSize.A5;
options.fitToPaperMode = FitToPaperModes.FitToPage;
options.paperOrientation = PdfPaperOrientation.Landscape;
options.grayScale = true;
// Create a PDF from the Google.com Home Page
PdfDocument.fromUrl("https://www.google.com/", {renderOptions: options}).then(async (pdf) => {
return await pdf.saveAs("set-margins-and-page-size.pdf");
});Im obigen Code-Block konfigurieren wir IronPDF so, dass es unsere Google-Homepage-PDF in Graustufen im Querformat und mit mindestens 50 Millimetern Randabstand erzeugt. Wir haben es auch so eingestellt, dass der Inhalt für die Papiergröße A5 geeignet ist.
PDFs aus dynamischen Webseiten generieren
Bei Webseiten, die Inhalte enthalten, die nicht sofort verfügbar sind und beim Laden der Seite gerendert werden, kann es erforderlich sein, das Rendern des Seiteninhalts anzuhalten, bis bestimmte Bedingungen erfüllt sind.
Der Entwickler möchte beispielsweise eine PDF-Datei mit Inhalten erstellen, die erst 15 Sekunden nach dem Laden der Seite erscheint. In einem anderen Fall kann derselbe Inhalt erst erscheinen, wenn ein komplexer clientseitiger Code ausgeführt wird.
Für diese beiden Fälle gilt(und viele mehr)in der Node-Version von IronPDF ist der WaitFor-Mechanismus definiert. Entwickler können diese Eigenschaft in ihre "ChromePdfRenderOptions"-Einstellungen aufnehmen, um die Chrome-Rendering-Engine von IronPDF anzuweisen, den Inhalt einer Seite zu konvertieren, wenn bestimmte Ereignisse auftreten.
Mit dem folgenden Codeblock wird IronPDF so eingestellt, dass es 20 Sekunden wartet, bevor es den Inhalt unserer Homepage als PDF-Datei erfasst:
import {PdfDocument, defaultChromePdfRenderOptions, WaitForType} from "@ironsoftware/ironpdf";
import('./config.js');
// Configure the Chrome Renderer to wait until 20 seconds has passed
// before rendering the web page as a PDF.
var options = defaultChromePdfRenderOptions();
options.waitFor = {
type: WaitForType.RenderDelay,
delay: 20000
}
PdfDocument.fromUrl("https://ironpdf.com/nodejs/", {renderOptions: options}).then(async (pdf) => {
return await pdf.saveAs("waitfor-renderdelay.pdf");
});Der nächste Codeblock konfiguriert IronPDF so, dass es wartet, bis ein Element auf einer populärenSEO-Texteditor erfolgreich ausgewählt werden können.
import {PdfDocument, defaultChromePdfRenderOptions, WaitForType} from "@ironsoftware/ironpdf";
import('./config.js');
// Configure the Chrome Renderer to wait up to 20 seconds for a specific element to appear
options.waitFor = {
type: WaitForType.HtmlElement,
htmlQueryStr: "div.ProseMirror",
maxWaitTime: 20000,
}
PdfDocument.fromUrl("https://app.surferseo.com/drafts/s/V7VkcdfgFz-dpkldsfHDGFFYf4jjSvvjsdf", {renderOptions: options}).then(async (pdf) => {
return await pdf.saveAs("waitfor-htmlelement.pdf");
});PDFs aus einer HTML-Vorlage generieren
Im letzten Abschnitt dieses Tutorials werden wir alle in den vorangegangenen Abschnitten vorgestellten Kenntnisse anwenden, um eine sehr praktische Automatisierung durchzuführen: die Erstellung eines oder mehrerer PDFs unter Verwendung einer HTML-Vorlage.
Die Vorlage, die wir für diesen Abschnitt verwenden werden, ist unten abgebildet. Sie wurde von dieser öffentlich zugänglichenrechnung vorlage zur Aufnahme von Platzhalter-Tags(z.B..{UNTERNEHMENSNAME}, {VOLLSTÄNDIGER NAME}, {RECHNUNGSNUMMER}, usw.) für austauschbare Inhalte.
Eine Vorlage für eine Musterrechnung. Wir werden zusätzlichen JavaScript-Code schreiben, der dynamische Daten zu dieser Vorlage hinzufügt, bevor wir sie in PDFs generieren.
Bevor Sie fortfahren, können Sieherunterladen diese HTML-Vorlage und prüfen Sie sie in Ihrer bevorzugten IDE.
Im nächsten Block des Quellcodes laden wir die HTML-Vorlage in ein neues PdfDocument-Objekt, ersetzen die von uns definierten Platzhalter durch einige Dummy-Testdaten und speichern dann das PdfDocument-Objekt im Dateisystem.
import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');
/**
* Loads an HTML template from the file system.
*/
async function getTemplateHtml(fileLocation) {
// Return promise for loading template file
return PdfDocument.fromFile(fileLocation);
}
/**
* Save the PDF document at a given location.
*/
async function generatePdf(pdf, location) {
return pdf.saveAs(location);
}
/**
* Use the PdfDocument.replaceText method to replace
* a specified placeholder with a provided value.
*/
async function addTemplateData(pdf, key, value) {
return pdf.replaceText(key, value);
}
const template = "./sample-invoice.html";
getTemplateHtml(template).then(async (doc) => { // load HTML template from file
await addTemplateData(doc, "{FULL-NAME}", "Lizbeth Presland");
await addTemplateData(doc, "{ADDRESS}", "678 Manitowish Alley, Portland, OG");
await addTemplateData(doc, "{PHONE-NUMBER}", "(763) 894-4345");
await addTemplateData(doc, "{INVOICE-NUMBER}", "787");
await addTemplateData(doc, "{INVOICE-DATE}", "August 28, 2023");
await addTemplateData(doc, "{AMOUNT-DUE}", "13,760.13");
await addTemplateData(doc, "{RECIPIENT}", "Celestyna Farmar"),
await addTemplateData(doc, "{COMPANY-NAME}", "BrainBook");
await addTemplateData(doc, "{TOTAL}", "13,760.13");
await addTemplateData(doc, "{AMOUNT-PAID}", "0.00");
await addTemplateData(doc, "{BALANCE-DUE}", "13,760.13");
await addTemplateData(doc, "{ITEM}", "Training Sessions");
await addTemplateData(doc, "{DESCRIPTION}", "60 Minute instruction");
await addTemplateData(doc, "{RATE}", "3,440.03");
await addTemplateData(doc, "{QUANTITY}", "4");
await addTemplateData(doc, "{PRICE}", "13,760.13");
return doc;
}).then(async (doc) => await generatePdf(doc, "html-template-to-pdf.pdf"));Der obige Quelltext definiert drei asynchrone Hilfsfunktionen:
getTemplateHtml: verwendet die MethodePdfDocument.fromHtml, um eine HTML-Vorlage in ein neuesPdfDocument-Objekt zu laden.- addTemplateData": verwendet die Methode "PdfDocument.replaceText", um einen angegebenen Platzhalter zu ersetzen(als Schlüssel bezeichnet)mit seinem Ersatzdatenwert.
generatePdf: speichert einPdfDocumentan einem angegebenen Speicherort.Außerdem deklarieren wir eine Variable
const template, um den Speicherort unserer HTML-Vorlagendatei zu speichern. Die aus dem obigen Quellcode generierte PDF-Datei ist unten abgebildet.
Das neue PDF-Dokument, das durch die Ersetzung von in einem HTML-Template definierten Platzhaltern durch echte Daten entsteht. Dieses Dokument behält die CSS-Stile und das Layout bei, die wir erwarten würden, wenn keine derartigen Ersetzungen stattgefunden hätten.
Weitere Lektüre
Dieses Tutorial hat nur an der Oberfläche dessen gekratzt, was mit den High-Level-API-Funktionen von IronPDF möglich ist. Studieren Sie diese verwandten Themen, um Ihr Wissen und Verständnis zu vertiefen.
Die Klasse
PdfGeneratorpdfDocument: Dies ist eine spezielle Dienstleistungsklasse zur Erstellung vonPdfDocument-Objekten aus HTML, URLs, Zip-Archiven und anderen Quellmedien. Diese Klasse bietet eine praktikable Alternative zur Verwendung der PDF-Rendering-Funktionen, die in der Klasse "PDFDocument" definiert sind.- httpLoginCredentialswenn Sie jemals PDFs von Webseiten erstellen müssen, für die bestimmte Cookies erforderlich sind oder die passwortgeschützt sind, dann wird sich diese Referenz als äußerst nützlich erweisen.
