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

HTML to PDF NodeJS

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

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 die 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 in mehreren Programmiersprachen verfügbar. For detailed coverage on how to create PDFs in .NET, Java, and Python, consult the official doc pages. Dieses Tutorial deckt die Verwendung für Node.js-Projekte ab

Wie man in Node.js HTML in PDF konvertiert

  1. Installieren Sie die HTML to PDF Node-Bibliothek über NPM: npm install @ironsoftware/ironpdf.
  2. Importieren Sie die PdfDocument Klasse aus dem @ironsoftware/ironpdf Paket.
  3. Konvertieren Sie aus einem HTML-String, einer Datei oder einer Web-URL.
  4. (optional) Kopf- und Fußzeilen hinzufügen, Seitengröße, Ausrichtung und Farbe ändern.
  5. Aufrufen von PdfDocument.saveAs, 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 for 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.

Manuelle Installation der IronPDF Engine (optional)

IronPDF for Node.js erfordert derzeit eine IronPDF Engine Binary, um korrekt zu funktionieren.

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

{i:(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ärdateien ist jedoch in Situationen, in denen der Zugang zum Internet begrenzt, eingeschränkt oder unerwünscht ist, unerlässlich.]

Lizenzschlüssel beantragen (optional)

Standardmäßig versieht IronPDF alle Dokumente, die es erstellt oder ändert, mit einem Wasserzeichen im Hintergrund.

Abbildung 1 Erhalten 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 licenseKey-Eigenschaft des globalen IronPdfGlobalConfig-Objekts auf einen gültigen Lizenzschlüssel setzen. Der Quellcode für die Umsetzung dieser Aufgabe ist unten angegeben:

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

Purchase a license key from our licensing page, or contact us to 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 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'; // Import the configuration script
// ...
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// ...
JAVASCRIPT

Konvertieren von HTML in PDF

Die Node-Version der IronPDF Library bietet drei Ansätze zur Erstellung von PDF-Dateien aus HTML-Inhalten:

  1. Aus einer Zeichenfolge von HTML-Code
  2. Aus einer lokalen HTML-Datei
  3. 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 unbearbeiteten Webseitenauszeichnungen erzeugen können.

Diese Methode bietet die größte Flexibilität unter den drei Ansätzen. Denn die Daten in der HTML-Zeichenkette können praktisch überall herkommen: aus Textdateien, Datenströmen, einer HTML-Vorlage, generierten HTML-Daten usw.

Das folgende Code-Beispiel zeigt, wie die Methode PdfDocument.fromHtml in der Praxis eingesetzt werden kann:

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 einem Textstring auf, der den Markup-Code für ein Überschriftenelement der Ebene 1 enthält.

PdfDocument.fromHtml gibt ein Promise zurück, das eine Instanz der Klasse PdfDocument auflöst. 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.

Abbildung 2 The PDF generated from the HTML string "<h1>Hello from IronPDF!</h1>". Die PDF-Dateien, die PdfDocument.fromHtml erzeugt, sehen genauso aus wie der Inhalt einer Webseite.

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 dieser Beispiel-Webseite arbeiten.

Abbildung 3 Unsere HTML-Beispielseite, wie sie in Google Chrome erscheint. Laden Sie diese und ähnliche Seiten von der File Samples Website herunter: https://filesamples.com/samples/code/html/sample2.html

Die folgenden Codezeilen konvertieren das gesamte Beispieldokument in eine PDF-Datei. Anstelle eines HTML-Strings 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

Wir haben den Inhalt der resultierenden PDF-Datei unten eingefügt. 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.

Abbildung 4 **Dieses PDF wurde aus dem vorherigen Code-Beispiel generiert. Vergleichen Sie das Aussehen des Textes mit dem vorherigen Bild, und beachten Sie die bemerkenswerte Ähnlichkeit!

Wenn Sie sich den Quellcode der Beispielseite angesehen haben, werden Sie feststellen, dass er etwas komplexer ist. Es werden mehrere Arten von HTML-Elementen verwendet (Absätze, ungeordnete Listen, Zeilenumbrüche, horizontale Regeln, Hyperlinks, Bilder usw.) und auch ein gewisses Maß an Skripting (für das Setzen von Cookies).

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

Abbildung 5 Ein Artikel über Puppeteer, eine Node-Bibliothek, die durch ihre Fähigkeit bekannt wurde, 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 verwenden, um zahlreiche Browseraufgaben auf der Server- oder Client-Seite zu automatisieren (eine davon ist die serverseitige HTML-PDF-Generierung).

Die neue Seite bezieht zahlreiche Assets (CSS-Dateien, Bilder, Skriptdateien usw.) und verwendet ein noch komplexeres Layout. Für das nächste Beispiel werden wir eine gespeicherte Kopie dieser Seite (zusammen mit den Quelldateien) in eine pixelgenaue PDF-Datei konvertieren.

Der folgende Codeausschnitt geht davon aus, dass die Seite im gleichen Verzeichnis wie unser Projekt als "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 Codeschnipsels.

Abbildung 6 Wenn es in Google Chrome gut aussieht, wird es auch bei der Umwandlung in ein PDF gut aussehen. Dazu gehören auch 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 rohem Markup aus Strings und Dateien beschränkt. IronPDF kann auch HTML von einer URL anfordern.

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

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

Verwenden Sie diesen Quellcode, um diesen Wikipedia-Artikel in eine PDF-Datei zu konvertieren:

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 innerhalb weniger Codezeilen in eine PDF-Datei zu konvertieren. IronPDF übernimmt den HTML-Code der Webadresse für Sie und rendert ihn nahtlos. Es werden keine HTML-Dateien oder Textstrings benötigt!

Abbildung 8 Das PDF, das durch den Aufruf von PdfDocument.fromUrl auf einem 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, die sich in einer komprimierten (zip) Datei befindet, in eine PDF-Datei zu konvertieren.

Nehmen wir zum Beispiel an, dass wir eine Zip-Datei im Projektverzeichnis mit der folgenden internen Struktur haben:

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

Die 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>
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 stellt unser Produktlogo dar:

Abbildung 9 Das Beispielbild innerhalb einer hypothetischen HTML-Zip-Datei.

Wenn Sie die Methode fromZip aufrufen, 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 möchten.

Wir konvertieren die index.html-Datei im Zip-Ordner auf die gleiche 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 der Funktion PdfDocument.fromZip. Mit dieser Funktion wird der in der ZIP-Datei enthaltene HTML-Code mit den darin enthaltenen Assets erfolgreich gerendert.

Erweiterte Optionen für die Generierung von HTML in PDF

Die ChromePdfRenderOptions-Schnittstelle ermöglicht es Node-Entwicklern, das HTML-Rendering-Verhalten der Bibliothek zu ändern. Die dort angegebenen Eigenschaften ermöglichen eine detaillierte Anpassung des Erscheinungsbildes von PDFs vor dem PDF-Rendering. Darüber hinaus ermöglichen sie die Behandlung spezifischer Grenzfälle bei der HTML-PDF-Konvertierung.

IronPDF rendert neue PDFs zunächst mit einigen Standardwerten für 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 das HTML-zu-PDF-Rendering vorgestellt, die die Verwendung der ChromePdfRenderOptions-Schnittstelle erfordern.

Jeder Unterabschnitt beginnt mit den voreingestellten Werten und ändert sie nach Bedarf, um das Ziel zu erreichen.

Anpassen der Ausgabe der PDF-Generierung

Eigene 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-Such-Startseite mit einer benutzerdefinierten Kopf- und Fußzeile aus Textinhalten erstellt. Wir verwenden Trennlinien, um diesen Inhalt vom Hauptteil der Seite zu trennen. Wir verwenden außerdem unterschiedliche Schriftarten in der Kopf- und Fußzeile, um die Unterscheidungen 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 ergibt diese PDF-Datei:

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

Um noch mehr Kontrolle über das Layout, die Positionierung und den Inhalt der Kopf- und Fußzeile 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'; // 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 for Node.js kann Ihre HTML-Seiten bei der Konvertierung in PDFs anpassen.

Ränder, Seitengrößen, Seitenausrichtung und Farbe einstellen

IronPDF unterstützt zusätzliche Einstellungen für die Definition 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 Code-Block konfigurieren wir IronPDF so, dass es unsere Google-Homepage-PDF in Graustufen im Querformat und mit mindestens 50 Millimetern Randabstand erzeugt. Außerdem haben wir den Inhalt an die Größe von A5-Papier angepasst.

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 zu unterbrechen, bis bestimmte Bedingungen erfüllt sind.

Der Entwickler möchte z. B. eine PDF-Datei mit Inhalten erstellen, die erst 15 Sekunden nach dem Laden der Seite angezeigt werden. In einem anderen Fall kann derselbe Inhalt erst erscheinen, wenn ein komplexer clientseitiger Code ausgeführt wird.

Um diese beiden Randfä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 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'; // 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 beliebten 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 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 an diese öffentlich zugängliche Rechnung-Vorlage angepasst, um Platzhalter-Tags (z. B. {COMPANY-NAME}, {FULL-NAME}, {INVOICE-NUMBER} usw.) für austauschbare Inhalte einzufügen.

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

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 das PdfDocument-Objekt dann 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 Quelltext 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 (als Schlüssel bezeichnet) durch seinen Ersatzdatenwert zu ersetzen.
  • generatePdf: speichert ein PdfDocument an einem bestimmten Speicherort.

Außerdem deklarieren wir eine const template-Variable, die den Speicherort unserer HTML-Vorlagendatei enthält. Die aus dem obigen Quellcode generierte PDF-Datei ist unten abgebildet.

Abbildung 14 Das neue PDF-Dokument, das durch das Ersetzen von in einer HTML-Vorlage 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 Informationen

Dieses Tutorial hat nur an der Oberfläche dessen gekratzt, was mit den High-Level-API-Funktionen von IronPDF möglich ist. Erwägen Sie, diese verwandten Themen zu studieren, um Ihr Wissen und Verständnis zu erweitern.

  1. Die PdfGenerator Klasse: Dies ist eine spezielle Dienstleistungsklasse zur Erstellung von PdfDocument 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.
  2. HttpLoginCredentials: Wenn Sie jemals PDFs aus Webseiten generieren müssen, die bestimmte 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 für Node.js beteiligt?

Um IronPDF in einem Node.js-Projekt zu installieren, führen Sie den Befehl npm install @ironsoftware/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