1. IronPDF
  2. Anleitungen
  3. HTML zu PDF in Node.js
HTML in PDF konvertieren in Node.js

HTML zu PDF NodeJS

Darrius Serrant
Darrius Serrant
Aktualisiert:
This article was translated from English: Does it need improvement?
Translated
View the article in English

Die Möglichkeit, aus reinem HTML, CSS und JavaScript hochwertige PDFs zu erstellen, ist die leistungsstärkste und beliebteste Funktion von IronPDF. Dieses Tutorial ist eine umfassende Einführung, die Node-Entwicklern hilft, IronPDF zur Integration der HTML-zu-PDF-Generierung in ihre eigenen Projekte zu nutzen.

IronPDF ist eine High-Level-API-Bibliothek, die Entwicklern hilft, leistungsstarke und robuste PDF-Verarbeitungsfunktionen schnell und einfach in Softwareanwendungen zu implementieren. IronPDF ist in mehreren Programmiersprachen verfügbar. Eine detaillierte Beschreibung, wie man PDFs in .NET , Java und Python erstellt, finden Sie in der offiziellen Dokumentation . Dieses Tutorial behandelt die Verwendung im Kontext von Node.js-Projekten.

Wie man HTML in Node.js in PDF konvertiert

  1. Install the HTML to PDF Node library via NPM: npm install @ironsoftware/ironpdf.
  2. Importieren Sie die Klasse PdfDocument aus dem Paket @ironsoftware/ironpdf.
  3. Konvertieren von HTML-String, Datei oder Web-URL.
  4. (optional) Hinzufügen von Kopf- und Fußzeilen, Ändern von Seitengröße, Ausrichtung und Farbe.
  5. Rufen Sie PdfDocument.saveAs auf, um das erzeugte PDF zu speichern

Einstieg

Nutzen Sie IronPDF heute kostenlos in Ihrem Projekt.

Erster Schritt:
green arrow pointer

Installieren Sie die IronPDF-Bibliothek für Node.js

Installieren Sie das IronPDF Node.js-Paket, indem Sie den unten angegebenen NPM-Befehl in Ihrem gewählten Node-Projekt ausführen:

npm install @ironsoftware/ironpdf
npm install @ironsoftware/ironpdf
SHELL

Sie können das IronPDF-Paket auch manuell herunterladen und installieren.

Installieren Sie die IronPDF-Engine manuell (optional).

IronPDF für Node.js benötigt derzeit eine IronPDF Engine-Binärdatei , um ordnungsgemäß zu funktionieren.

Installieren Sie die IronPDF Engine-Binärdatei, indem Sie das entsprechende Paket für Ihr Betriebssystem installieren :

Hinweis:Die Installation der IronPDF Engine ist optional, da @ironpdf bei der ersten Ausführung automatisch die richtige Binärdatei für Ihren Browser und Ihr Betriebssystem von NPM herunterlädt und installiert. 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

Lizenzschlüssel anwenden (optional)

Standardmäßig versieht IronPDF alle von ihm generierten oder geänderten Dokumente mit einem betitelten Hintergrundwasserzeichen.

Figure 1 Um PDF-Dokumente ohne Wasserzeichen zu generieren, erhalten Sie einen Lizenzschlüssel unter ironpdf.com/nodejs/licensing/.

Um IronPDF ohne das zusätzliche Wasserzeichen-Branding zu verwenden, müssen Sie die licenseKey Eigenschaft des globalen IronPdfGlobalConfig -Objekts mit einem gültigen Lizenzschlüssel festlegen. Der Quellcode, der dies ermöglicht, ist unten aufgeführt:

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

// Get the global config object
var config = IronPdfGlobalConfig.getConfig();

// Set the license key for IronPDF
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";
import { IronPdfGlobalConfig } from "@ironsoftware/ironpdf";

// Get the global config object
var config = IronPdfGlobalConfig.getConfig();

// Set the license key for IronPDF
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";
JAVASCRIPT

Erwerben Sie einen Lizenzschlüssel auf unserer Lizenzseite oder kontaktieren Sie uns, um einen kostenlosen Testlizenzschlüssel zu erhalten .

Hinweis:Der Lizenzschlüssel und andere globale Konfigurationseinstellungen, sollten vor der Verwendung anderer Bibliotheksfunktionen gesetzt werden, um die beste Leistung und korrekte Funktionalität zu gewährleisten.

In den folgenden Abschnitten dieses Tutorials wird davon ausgegangen, dass wir über einen Lizenzschlüssel verfügen und diesen in einer separaten JavaScript-Datei namens config.js hinterlegt haben. Wir importieren dieses Skript überall dort, wo wir die Funktionen von IronPDF nutzen:

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// ...
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// ...
JAVASCRIPT

HTML in PDF umwandeln

Die Node-Version der IronPDF-Bibliothek bietet drei Ansätze zum Erstellen von PDF-Dateien aus HTML-Inhalten:

  1. Aus einer HTML-Code-Zeichenfolge
  2. Aus einer lokalen HTML-Datei
  3. Von einer Online-Website

In diesem Abschnitt werden alle drei Methoden detailliert erläutert.

Erstellen einer PDF-Datei aus einem HTML-String

PdfDocument.fromHtml ist eine Methode, mit der Sie PDFs aus Zeichenketten des rohen Webseiten-Markups generieren können.

Diese Methode bietet die größte Flexibilität der drei Ansätze. Dies liegt daran, dass die Daten im HTML-String praktisch von überall her stammen können: Textdateien, Datenströme, eine HTML-Vorlage, generierte HTML-Daten usw.

Das folgende Codebeispiel veranschaulicht die praktische Anwendung der Methode PdfDocument.fromHtml :

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// 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");
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// 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");
JAVASCRIPT

Wie oben gezeigt, rufen wir die Methode PdfDocument.fromHtml mit einer Textzeichenfolge auf, die den Markup-Code für ein Überschriftenelement der ersten Ebene enthält.

PdfDocument.fromHtml gibt ein Promise zurück, das zu einer Instanz der Klasse PdfDocument aufgelöst wird. 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 bedeutende Anwendungsfälle bei der Erstellung und Bearbeitung von PDFs.

Zum Schluss verwenden wir die saveAs Methode des PdfDocument , um die Datei auf der Festplatte zu speichern. Die gespeicherte PDF-Datei wird unten angezeigt.

Figure 2 The PDF generated from the HTML string "<h1>Hello from IronPDF!</h1>". Die von PdfDocument.fromHtml generierten PDF-Dateien sehen genauso aus wie Webseiteninhalte.

Erstellen einer PDF-Datei aus einer HTML-Datei

PdfDocument.fromHtml funktioniert nicht nur mit HTML-Zeichenketten. Die Methode akzeptiert auch einen Pfad zu einem lokalen HTML-Dokument.

In unserem nächsten Beispiel werden wir mit dieser Beispielwebseite arbeiten.

Figure 3 Unsere Beispiel-HTML-Seite, wie sie in Google Chrome angezeigt wird. Laden Sie diese und ähnliche Seiten von der Webseite "File Samples" herunter:https://filesamples.com/samples/code/html/sample2.html

Die folgenden Codezeilen konvertieren das gesamte Beispieldokument in eine PDF-Datei. Anstelle einer HTML-Zeichenkette rufen wir PdfDocument.fromHtml mit einem gültigen Dateipfad zu unserer Beispieldatei auf:

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// 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");
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// 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");
JAVASCRIPT

Den Inhalt der resultierenden PDF-Datei haben wir unten eingefügt. Beachten Sie, dass IronPDF nicht nur das Erscheinungsbild des ursprünglichen HTML-Dokuments beibehält, sondern auch die Funktionalität von Links, Formularen und anderen gängigen interaktiven Elementen.

Figure 4 Dieses PDF wurde aus dem vorherigen Codebeispiel generiert. Vergleichen Sie das Aussehen mit dem vorherigen Bild und beachten Sie die bemerkenswerte Ähnlichkeit!

Wenn Sie den Quellcode der Beispielseite untersucht haben, werden Sie feststellen, dass er komplexer ist. Es verwendet mehr Arten von HTML-Elementen (Absätze, ungeordnete Listen, Zeilenumbrüche, horizontale Linien, Hyperlinks, Bilder usw.) und beinhaltet auch einige Skripte (die zum Setzen von Cookies verwendet werden).

IronPDF ist in der Lage, Webinhalte darzustellen, die weitaus komplexer sind als das, was wir bisher verwendet haben. Um dies zu veranschaulichen, betrachten wir die folgende Seite:

Figure 5 Ein Artikel über Puppeteer, eine Node-Bibliothek, die für ihre Fähigkeit bekannt wurde, Chrome programmatisch mithilfe einer Headless-Browserinstanz zu steuern.

Die oben abgebildete Seite ist die eines Artikels über die Puppeteer Node Library. Puppeteer führt Headless-Browser-Sitzungen aus, die Node-Entwickler nutzen, um zahlreiche Browseraufgaben serverseitig oder clientseitig zu automatisieren (eine davon ist die serverseitige HTML-PDF-Generierung).

Die neue Seite verwendet zahlreiche Ressourcen (CSS-Dateien, Bilder, Skriptdateien usw.) und ein noch komplexeres Layout. Im nächsten Beispiel konvertieren wir eine gespeicherte Kopie dieser Seite (samt der zugehörigen Quelldateien) in ein pixelgenaues PDF.

Der folgende Codeausschnitt setzt voraus, dass die Seite im selben Verzeichnis wie unser Projekt unter dem Namen "sample4.html" gespeichert ist:

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Render a PDF from even more complex HTML code.
PdfDocument.fromHtml("./sample4.html").then(async (pdf) => {
    return await pdf.saveAs("html-file-to-pdf-2.pdf");
});
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Render a PDF from even more complex HTML code.
PdfDocument.fromHtml("./sample4.html").then(async (pdf) => {
    return await pdf.saveAs("html-file-to-pdf-2.pdf");
});
JAVASCRIPT

Das folgende Bild zeigt die Ergebnisse des obigen Code-Ausschnitts.

Figure 6 Wenn es in Google Chrome gut aussieht, dann wird es auch in einer PDF-Datei gut aussehen. Dies umfasst Seitendesigns mit hohem CSS- und JavaScript-Aufwand.

Erstellen einer PDF-Datei aus einer URL

IronPDF kann HTML-Zeichenketten und HTML-Dateien beliebiger Größe und Komplexität konvertieren. Sie sind jedoch nicht darauf beschränkt, nur Rohdaten aus Zeichenketten und Dateien zu verwenden. IronPDF kann auch HTML von einer URL anfordern.

Betrachten Sie den Wikipedia-Artikel unter https://en.wikipedia.org/wiki/PDF .

Figure 7 Der Wikipedia-Artikel über das PDF-Format, wie er in einem standardkonformen Webbrowser angezeigt wird.

Verwenden Sie diesen Quellcode, um diesen Wikipedia-Artikel in ein PDF umzuwandeln:

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// 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");
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// 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");
JAVASCRIPT

Oben verwenden wir PdfDocument.fromUrl um die Webseite mit wenigen Codezeilen in ein PDF umzuwandeln. IronPDF erfasst für Sie den HTML-Code der Webadresse und stellt ihn nahtlos dar. Es werden keine HTML-Dateien oder Textzeichenfolgen benötigt!

Figure 8 Das PDF, das durch den Aufruf PdfDocument.fromUrl für einen Wikipedia-Artikel generiert wurde. Beachten Sie die Ähnlichkeiten zur ursprünglichen Webseite.

Erstellen einer PDF-Datei aus einem ZIP-Archiv

Verwenden Sie PdfDocument.fromZip , um eine bestimmte HTML-Datei aus einer komprimierten (ZIP-)Datei in eine PDF-Datei zu konvertieren.

Nehmen wir beispielsweise an, wir haben eine Zip-Datei im Projektverzeichnis mit folgender interner Struktur:

html-zip.zip
├─ index.html
├─ style.css
├─ logo.png

Die Datei index.html enthält folgenden 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>
HTML

Die Datei style.css definiert 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;
}

Schließlich zeigt logo.png unser Produktlogo:

Figure 9 Das Beispielbild in einer hypothetischen HTML-ZIP-Datei.

Beim Aufruf der Methode fromZip muss im ersten Argument ein gültiger Pfad zur ZIP-Datei angegeben werden, zusammen mit einem JSON-Objekt, das die Eigenschaft mainHtmlFile mit dem Namen der HTML-Datei aus der ZIP-Datei festlegt, die konvertiert werden soll.

Wir konvertieren die index.html-Datei im ZIP-Ordner auf folgende Weise:

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Render the HTML from a zip archive
PdfDocument.fromZip("./html-zip.zip", {
  mainHtmlFile: "index.html"
}).then(async (pdf) => {
  return await pdf.saveAs("html-zip-to-pdf.pdf");
});
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Render the HTML from a zip archive
PdfDocument.fromZip("./html-zip.zip", {
  mainHtmlFile: "index.html"
}).then(async (pdf) => {
  return await pdf.saveAs("html-zip-to-pdf.pdf");
});
JAVASCRIPT

Abbildung 10 PDF-Erstellung mit Hilfe der Funktion PdfDocument.fromZip . Diese Funktion rendert erfolgreich den im ZIP-File enthaltenen HTML-Code inklusive der darin enthaltenen Assets.

Erweiterte Optionen zur HTML-zu-PDF-Konvertierung

Die ChromePdfRenderOptions Schnittstelle ermöglicht es Node-Entwicklern, das HTML-Rendering-Verhalten der Bibliothek zu modifizieren. Die dort dargestellten Eigenschaften ermöglichen eine detaillierte Anpassung des Erscheinungsbilds von PDFs vor der PDF-Darstellung. Darüber hinaus ermöglichen sie die Behandlung spezifischer Sonderfälle der HTML-PDF-Konvertierung.

IronPDF rendert neue PDFs zunächst mit einigen Standardwerten ChromePdfRenderOptions . Sie können diese voreingestellten Werte selbst abfragen, indem Sie die Funktion defaultChromePdfRenderOptions aufrufen:

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

// Retrieve a ChromePdfRenderOptions object with default settings.
var options = defaultChromePdfRenderOptions();
import { defaultChromePdfRenderOptions } from "@ironsoftware/ironpdf";

// Retrieve a ChromePdfRenderOptions object with default settings.
var options = defaultChromePdfRenderOptions();
JAVASCRIPT

In diesem Abschnitt werden die gängigsten Anwendungsfälle für die HTML-zu-PDF-Konvertierung, die die Verwendung der ChromePdfRenderOptions Schnittstelle erfordern, kurz erläutert.

Jeder Unterabschnitt beginnt mit den voreingestellten Werten und passt diese nach Bedarf an, um das angestrebte Ergebnis zu erzielen.

PDF-Ausgabe anpassen

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.

Das folgende Beispiel erstellt eine PDF-Version der Google-Suchseite mit einer benutzerdefinierten Kopf- und Fußzeile aus Textinhalten. Wir verwenden Trennlinien, um diesen Inhalt vom Seiteninhalt abzugrenzen. Wir verwenden außerdem unterschiedliche Schriftarten in Kopf- und Fußzeile, um die Unterscheidung deutlicher zu machen.

import { PdfDocument, defaultChromePdfRenderOptions, AffixFonts } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Initialize render options with default settings
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 a URL
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("add-custom-headers-footers-1.pdf");
});
import { PdfDocument, defaultChromePdfRenderOptions, AffixFonts } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Initialize render options with default settings
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 a URL
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("add-custom-headers-footers-1.pdf");
});
JAVASCRIPT

Der Quellcode erzeugt diese PDF-Datei:

Abbildung 11 Es wurde eine neue Seite im PDF-Format erstellt, die von der Google-Startseite generiert wurde. Beachten Sie die zusätzlichen Kopf- und Fußzeilen.

Für noch mehr Kontrolle über Layout, Positionierung und Inhalt der Kopf- und Fußzeile können Sie diese auch mithilfe von reinem HTML anstelle von Text definieren.

Im nachfolgenden Codeblock verwenden wir HTML, um reichhaltigere Inhalte in Kopf- und Fußzeile einzubinden. In der Kopfzeile formatieren wir die Seiten-URL fett und zentriert; In der Fußzeile betten wir ein Logo ein und zentrieren es.

import { PdfDocument, defaultChromePdfRenderOptions } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Initialize render options with default settings
var options = defaultChromePdfRenderOptions();

// Define a rich HTML header
options.htmlHeader = {
  htmlFragment: "<strong>https://www.google.com/</strong>",
  dividerLine: true,
  dividerLineColor: "blue",
  loadStylesAndCSSFromMainHtmlDocument: true,
};

// Define a rich HTML footer
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 a URL
await PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("add-html-headers-footers.pdf");
});
import { PdfDocument, defaultChromePdfRenderOptions } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Initialize render options with default settings
var options = defaultChromePdfRenderOptions();

// Define a rich HTML header
options.htmlHeader = {
  htmlFragment: "<strong>https://www.google.com/</strong>",
  dividerLine: true,
  dividerLineColor: "blue",
  loadStylesAndCSSFromMainHtmlDocument: true,
};

// Define a rich HTML footer
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 a URL
await PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("add-html-headers-footers.pdf");
});
JAVASCRIPT

Das Bild unten zeigt das Ergebnis dieser Änderungen.

Abbildung 12 IronPDF für Node.js ermöglicht die Anpassung Ihrer HTML-Seiten während der Konvertierung in PDFs.

Seitenränder, Seitengröße, Seitenausrichtung und Farbe festlegen

IronPDF unterstützt zusätzliche Einstellungen zum Definieren benutzerdefinierter Seitenränder, Seitengrößen und Seitenausrichtungen für frisch konvertierte PDFs.

import { PdfDocument, defaultChromePdfRenderOptions, PaperSize, FitToPaperModes, PdfPaperOrientation } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Initialize render options with default settings
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");
});
import { PdfDocument, defaultChromePdfRenderOptions, PaperSize, FitToPaperModes, PdfPaperOrientation } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Initialize render options with default settings
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");
});
JAVASCRIPT

Im obigen Codeblock konfigurieren wir IronPDF so, dass unsere Google-Homepage-PDF in Graustufen im Querformat und mit einem Rand von mindestens 50 Millimetern generiert wird. Wir haben es außerdem so eingestellt, dass der Inhalt zum A5-Papierformat passt.

PDFs aus dynamischen Webseiten generieren

Bei Webseiten, deren Inhalte nicht sofort verfügbar sind und beim Laden der Seite gerendert werden, kann es erforderlich sein, das Rendern der Seiteninhalte so lange zu unterbrechen, bis bestimmte Bedingungen erfüllt sind.

Beispielsweise möchte der Entwickler möglicherweise eine PDF-Datei generieren, deren Inhalt erst 15 Sekunden nach dem Laden der Seite erscheint. In einem anderen Fall erscheint dieser Inhalt möglicherweise erst, wenn komplexer clientseitiger Code ausgeführt wird.

Um diese beiden Sonderfälle (und viele weitere) zu behandeln, definiert die Node-Version von IronPDF den WaitFor Mechanismus. 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 eintreten.

Der folgende Codeblock weist IronPDF an, 20 Sekunden zu warten, bevor der Inhalt unserer Homepage als PDF erfasst wird:

import { PdfDocument, defaultChromePdfRenderOptions, WaitForType } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// 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");
});
import { PdfDocument, defaultChromePdfRenderOptions, WaitForType } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

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

Der nächste Codeblock konfiguriert IronPDF so, dass es wartet, bis ein Element in einem gängigen SEO-Texteditor erfolgreich ausgewählt werden kann.

import { PdfDocument, defaultChromePdfRenderOptions, WaitForType } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Configure the Chrome Renderer to wait up to 20 seconds for a specific element to appear
var options = defaultChromePdfRenderOptions();
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");
});
import { PdfDocument, defaultChromePdfRenderOptions, WaitForType } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Configure the Chrome Renderer to wait up to 20 seconds for a specific element to appear
var options = defaultChromePdfRenderOptions();
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");
});
JAVASCRIPT

PDFs aus einer HTML-Vorlage generieren

Im letzten Abschnitt dieses Tutorials werden wir das gesamte in den vorherigen Abschnitten eingeführte Wissen anwenden, um eine sehr praktische Automatisierung zu erreichen: die Generierung eines oder mehrerer PDFs mithilfe einer HTML-Vorlage.

Die Vorlage, die wir für diesen Abschnitt verwenden werden, ist unten dargestellt. Sie wurde von dieser öffentlich zugänglichen Rechnungsvorlage abgeleitet und enthält Platzhalter-Tags (z. B. {COMPANY-NAME}, {FULL-NAME}, {INVOICE-NUMBER} usw.) für austauschbare Inhalte.

Abbildung 13 Eine Beispielrechnungsvorlage. Wir werden zusätzlichen JavaScript-Code schreiben, der dieser Vorlage dynamische Daten hinzufügt, bevor wir sie in PDFs umwandeln.

Im nächsten Quellcodeblock laden wir die HTML-Vorlage in ein neues PdfDocument Objekt, ersetzen die von uns definierten Platzhalter durch einige Dummy-Testdaten und speichern das PdfDocument Objekt anschließend im Dateisystem.

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

/**
 * 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);
}

// Path to the template file
const template = "./sample-invoice.html";

// Load the template, replace placeholders, and save the PDF
getTemplateHtml(template).then(async (doc) => {
    // Replace placeholders with real data
    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"));
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

/**
 * 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);
}

// Path to the template file
const template = "./sample-invoice.html";

// Load the template, replace placeholders, and save the PDF
getTemplateHtml(template).then(async (doc) => {
    // Replace placeholders with real data
    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"));
JAVASCRIPT

Der obige Quellcode definiert drei asynchrone Hilfsfunktionen:

  • getTemplateHtml : verwendet die Methode PdfDocument.fromHtml , um eine HTML-Vorlage in ein neues PdfDocument Objekt zu laden.
  • addTemplateData : verwendet die Methode PdfDocument.replaceText , um einen bereitgestellten Platzhalter (auch als Schlüssel bezeichnet) durch seinen Ersatzdatenwert zu ersetzen.
  • generatePdf : Speichert ein PdfDocument an einem angegebenen Dateispeicherort.

Außerdem deklarieren wir eine const template Variable, die den Speicherort unserer HTML-Template-Datei speichert. Das aus dem obigen Quellcode generierte PDF wird unten angezeigt.

Abbildung 14 Das neue PDF-Dokument wurde erstellt, indem in einer HTML-Vorlage definierte Platzhalter durch echte Daten ersetzt wurden. Dieses Dokument behält die CSS-Stile und das Layout bei, die wir erwarten würden, wenn keine solchen Ersetzungen stattgefunden hätten.

Weiterführende Literatur

Dieses Tutorial hat nur an der Oberfläche dessen gekratzt, was mit den High-Level-API-Funktionen von IronPDF möglich ist. Um Ihr Wissen und Ihr Verständnis zu vertiefen, sollten Sie sich mit diesen verwandten Themen auseinandersetzen.

  1. Die Klasse PdfGenerator : Dies ist eine spezielle Hilfsklasse zum Erstellen von PdfDocument Objekten aus HTML, URLs, Zip-Archiven und anderen Quellmedien. Diese Klasse bietet eine praktikable Alternative zur Verwendung der in der Klasse PdfDocument definierten PDF-Rendering-Funktionen.
  2. HttpLoginCredentials : Falls Sie jemals PDFs von Webseiten generieren müssen, die spezielle Cookies erfordern oder passwortgeschützt sind, dann wird sich diese Referenz als äußerst nützlich erweisen.

Häufig gestellte Fragen

Wie kann ich HTML in PDF in Node.js konvertieren, ohne das Format zu verlieren?

In Node.js können Sie IronPDF verwenden, um HTML in PDF zu konvertieren, ohne das Format zu verlieren, indem Sie Methoden wie PdfDocument.fromHtml verwenden, die eine präzise Wiedergabe von HTML-Strings und Dateien im PDF-Format unterstützen.

Welche Schritte sind an der Installation von IronPDF for Node.js beteiligt?

Um IronPDF in einem Node.js-Projekt zu installieren, führen Sie den Befehl npm install @Iron Software/ironpdf aus. Dies fügt das IronPDF-Paket zu den Abhängigkeiten Ihres Projekts hinzu, sodass Sie dessen PDF-Verarbeitungsfunktionen nutzen können.

Wie kann ich ein PDF aus einer Web-URL in Node.js erzeugen?

Sie können die Methode PdfDocument.fromUrl in IronPDF verwenden, um eine Webseite direkt in ein PDF zu konvertieren, indem Sie die URL der Seite angeben. Diese Methode ruft den Inhalt ab und rendert ihn im PDF-Format.

Welche Optionen gibt es zur Anpassung der PDF-Ausgabe in IronPDF?

IronPDF bietet die ChromePdfRenderOptions Schnittstelle, die es ermöglicht, die PDF-Ausgabe anzupassen. Sie können Einstellungen wie Seitengröße, Ausrichtung, Ränder anpassen und dynamischen Inhalt über diese Schnittstelle einfügen.

Wie kann ich Kopf- und Fußzeilen zu meinen PDF-Dokumenten mit IronPDF hinzufügen?

Um Kopf- und Fußzeilen in PDFs mit IronPDF hinzuzufügen, verwenden Sie die Eigenschaften textHeader und textFooter, die in den ChromePdfRenderOptions verfügbar sind. Damit kann benutzerdefinierter Text oben und unten auf jeder Seite eingefügt werden.

Ist es möglich, HTML-Dateien in einem Zip-Archiv in PDFs mit Node.js zu konvertieren?

Ja, IronPDF unterstützt die Konvertierung von HTML-Dateien in einem Zip-Archiv in PDFs mit der Methode PdfDocument.fromZip, die eine Stapelverarbeitung mehrerer HTML-Dateien ermöglicht.

Wie kann ich Wasserzeichen aus PDFs entfernen, die mit IronPDF erstellt wurden?

Um Wasserzeichen aus PDFs, die mit IronPDF erstellt wurden, zu entfernen, müssen Sie einen gültigen Lizenzschlüssel innerhalb Ihrer Anwendung anwenden. Dies kann mit der Methode IronPdf.License.LicenseKey erfolgen.

Wie gehe ich mit asynchronem Webinhalt um, wenn ich zu PDF konvertiere?

IronPDF bietet den Mechanismus WaitFor, um asynchrone Inhalte zu verwalten und sicherzustellen, dass alle dynamischen Elemente vollständig geladen sind, bevor der PDF-Renderprozess beginnt.

Kann IronPDF kennwortgeschützte Webseiten in PDFs konvertieren?

Ja, durch die Verwendung von HttpLoginCredentials innerhalb der ChromePdfRenderOptions können Sie die notwendigen Anmeldedaten eingeben, um auf kennwortgeschützte Webseiten zuzugreifen und diese in PDFs zu konvertieren.

Was sollte ich tun, wenn meine HTML-zu-PDF-Konvertierung das korrekte Layout nicht beibehält?

Stellen Sie sicher, dass Sie die entsprechenden ChromePdfRenderOptions verwenden, um die Layoutanforderungen zu erfüllen. Die Anpassung von Einstellungen wie Seitengröße, Ausrichtung und Rändern kann dazu beitragen, das gewünschte Layout im konvertierten PDF beizubehalten.

Unterstützt IronPDF die HTML-zu-PDF-Konvertierung vollständig unter .NET 10?

Ja – IronPDF unterstützt .NET 10 für die HTML-zu-PDF-Konvertierung mithilfe von Klassen wie ChromePdfRenderer , einschließlich der Methoden RenderHtmlAsPdf , RenderHtmlFileAsPdf und RenderUrlAsPdf , mit Unterstützung für CSS3, JavaScript, Bilder und externe Ressourcen. Dies wird in der Dokumentation von IronPDF zu den Funktionen der .NET PDF-Bibliothek explizit bestätigt.

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

Weiterlesen
Bereit anzufangen?
Version: 2025.11 gerade veröffentlicht