HTML zu PDF in Node.js konvertieren

Die IronPDF-Bibliothek installieren

Installieren Sie das IronPDF Node.js-Paket, indem Sie den untenstehenden NPM-Befehl im von Ihnen gewählten Node.js-Projekt ausführen:

 npm i @ironsoftware/ironpdf

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

Wie installieren Sie die IronPDF-Engine?

IronPDF for Node.js benötigt eine IronPDF Engine-Binärdatei, um zu funktionieren.

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

Wie wendet man einen Lizenzschlüssel an?

Standardmäßig versieht IronPDF alle von ihm erstellten oder modifizierten Dokumente mit einem Wasserzeichen. Um das Wasserzeichen zu entfernen, setzen Sie die licenseKey Eigenschaft auf dem globalen IronPdfGlobalConfig Objekt mit einem gültigen Lizenzschlüssel:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/config.js

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

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

// Set a valid license key to remove watermarks
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";

Fordern Sie einen kostenlosen Testlizenzschlüssel an oder kaufen Sie einen Lizenzschlüssel auf der Lizenzierungsseite.

Die restlichen Codebeispiele in diesem Tutorial gehen davon aus, dass ein Lizenzschlüssel in einer separaten config.js Datei angewendet wurde, die am Anfang jedes Skripts importiert wird:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/config-import.js

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

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

Wie erstellen Sie ein PDF aus einem HTML-String? {#create-pdf-from-html-string}

PdfDocument.fromHtml generiert PDFs aus Zeichenfolgen rohen HTML-Markups. Dieser Ansatz bietet die größte Flexibilität der vier Methoden, da die HTML-Zeichenfolge praktisch von überall herkommen kann — Textdateien, Datenströme, eine HTML-Template-Engine oder dynamisch erstelltes Markup.

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-string-to-pdf.js

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

// Create a PDF from an HTML string
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");

PdfDocument.fromHtml gibt ein Promise zurück, das zu einer Instanz der PdfDocument Klasse auflöst. Nach dem Erhalt der Instanz rufen Sie saveAs mit einem Zielpfad auf, um das PDF auf die Festplatte zu schreiben. Die gespeicherte PDF-Datei rendert das HTML genauso, wie es ein standardkonformer Browser anzeigen würde.

The PDF generated from the HTML string <h1>Hello from IronPDF!</h1>. Die von PdfDocument.fromHtml generierten PDF-Dateien erscheinen genau so, wie es Webseiten-Inhalte tun würden.

Wie erstellen Sie ein PDF aus einer HTML-Datei? {#create-pdf-from-html-file}

PdfDocument.fromHtml akzeptiert auch einen Pfad zu einem lokalen HTML-Dokument. Anstelle eines Markup-Strings übergeben Sie einen gültigen Dateipfad als erstes Argument. Dies ist der bevorzugte Ansatz, wenn Sie mit gespeicherten Webseiten arbeiten, die auf lokale CSS-, JavaScript- und Bildressourcen verweisen.

Das folgende Beispiel konvertiert eine Beispielwebseite in ein PDF:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-file-to-pdf.js

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

// Render a PDF from a local HTML file
const pdf = await PdfDocument.fromHtml("./sample2.html");

// Save the PDF document to the project directory
await pdf.saveAs("html-file-to-pdf-1.pdf");

Die Beispiel-HTML-Seite, 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

IronPDF bewahrt das Erscheinungsbild des ursprünglichen HTML-Dokuments und erhält die Funktionalität von Links, Formularen und anderen interaktiven Elementen. Diese Genauigkeit erstreckt sich auf komplexe Seiten, die Absätze, Listen, Bilder, Hyperlinks und clientseitige Skripterstellung enthalten.

Dieses PDF wurde aus dem obigen HTML-Dateibeispiel generiert. Vergleichen Sie sein Erscheinungsbild mit dem vorherigen Bild — IronPDF bewahrt das Layout mit hoher Treue.

IronPDF verarbeitet Seiten, die weit über einfaches Markup hinausgehen. Das folgende Beispiel konvertiert eine funktionsreiche Seite, die zahlreiche externe CSS-Dateien, Bilder und Skriptressourcen verwendet:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-complex-file-to-pdf.js

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

// Render a PDF from a complex HTML page with external assets
PdfDocument.fromHtml("./sample4.html").then(async (pdf) => {
    return await pdf.saveAs("html-file-to-pdf-2.pdf");
});

Wenn es in Google Chrome gut aussieht, wird es auch gut aussehen, wenn es in ein PDF konvertiert wird. Dies schließt CSS-intensive und JavaScript-gerenderte Seitendesigns ein.

Wie erstellen Sie ein PDF aus einer URL? {#create-PDF-from-url}

PdfDocument.fromUrl ruft eine Live-Webseite ab und rendert sie als PDF. Übergeben Sie eine öffentlich zugängliche URL als das Argument. IronPDFs Chrome-Rendering-Engine ruft die Seite ab, lädt alle Ressourcen und erzeugt ein pixelgenaues PDF — kein manueller HTML-Download erforderlich.

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/url-to-pdf.js

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

// Convert a live web page to a PDF
const pdf = await PdfDocument.fromUrl("https://en.wikipedia.org/wiki/PDF");

// Save the document
await pdf.saveAs("url-to-pdf.pdf");

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

Das von PdfDocument.fromUrl bei einem Wikipedia-Artikel aufgerufene PDF. Beachten Sie seine enge Ähnlichkeit mit der ursprünglichen Webseite.

Wie erstellen Sie ein PDF aus einem Zip-Archiv? {#create-pdf-from-zip}

PdfDocument.fromZip konvertiert eine spezifische HTML-Datei aus einem ZIP-Archiv in ein PDF. Dies ist besonders nützlich, wenn selbstkontinente HTML-Projekte verteilt werden, die ihre HTML-, CSS- und Bildressourcen zusammen bündeln.

Für dieses Beispiel gehen wir davon aus, dass das Projektverzeichnis eine ZIP-Datei mit der folgenden Struktur enthält:

//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/zip-structure.txt
html-zip.zip
├─ index.html
├─ style.css
├─ logo.png

Die index.html Datei enthält:

//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/index.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 für Node.js">
    </a>
  </body>
</html>

//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/index.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 für Node.js">
    </a>
  </body>
</html>

Und style.css deklariert die Seitenlayout- und Schriftartregeln:

//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/style.css
@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;
}

Das Beispielbild innerhalb der hypothetischen HTML-ZIP-Datei.

Wenn Sie fromZip aufrufen, geben Sie den Pfad zur ZIP-Datei als erstes Argument und ein Konfigurationsobjekt als zweites an. Setzen Sie die mainHtmlFile Eigenschaft auf den Namen der HTML-Datei im Archiv, die konvertiert werden soll:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/zip-to-pdf.js

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

// Convert an HTML file from a ZIP archive to PDF
PdfDocument.fromZip("./html-zip.zip", {
  mainHtmlFile: "index.html"
}).then(async (pdf) => {
  return await pdf.saveAs("html-zip-to-pdf.pdf");
});

PDF-Erstellung mit PdfDocument.fromZip. Die Funktion rendert den HTML-Code aus der ZIP-Datei erfolgreich zusammen mit seinen eingebundenen Ressourcen.

Meine Lieblingsbibliothek dieser Art ist IronPDF. Es ermöglicht eine schnelle und effiziente Bearbeitung von PDF-Dateien. Es verfügt auch über viele wertvolle Funktionen, wie das Exportieren in das PDF/A-Format und das digitale Signieren von PDF-Dokumenten.

Milan Jovanovic

Microsoft MVP

Fallstudie ansehen

IronOCR bedeutet, dass wir jährlich 40.000 $ durch manuelle Verarbeitung einsparen können, während die Produktivität gesteigert wird und Ressourcen für wichtige Aufgaben freigesetzt werden. Ich würde es sehr empfehlen.

Brent Matzelle

Technischer Leiter, OPYN

Fallstudie ansehen

Die Iron Suite spielt eine entscheidende Rolle in unseren Operationen. Diese Werkzeuge erhöhen die Effizienz im gesamten Unternehmen, einschließlich der Erstellung von Grundrissen und der Verbesserung des Bestandsmanagements.

David Jones

Leitender Software-Ingenieur, Agorus Build

Fallstudie ansehen

Wie fügt man Kopf- und Fußzeilen hinzu? T>{#add-headers-footers}

Die textHeader und textFooter Eigenschaften fügen jedem gerenderten PDF seitenspezifische textbasierte Inhalte hinzu. Das folgende Beispiel erstellt ein PDF von der Google-Suchhomepage mit einem benutzerdefinierten Kopf- und Fußzeile, die jeweils eine andere Schriftart verwenden:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/custom-headers-footers.js

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

// Start from default render options
var options = defaultChromePdfRenderOptions();

// Configure a text-based header
options.textHeader = {
  centerText: "https://www.adobe.com",
  dividerLine: true,
  font: AffixFonts.CourierNew,
  fontSize: 12,
  leftText: "URL to PDF"
};

// Configure a 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 the page with custom headers and footers applied
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("add-custom-headers-footers-1.pdf");
});

Ein von der Google Startseite generiertes PDF mit benutzerdefiniertem Text-Header und -Footer, angewendet mit textHeader und textFooter.

Für reichhaltigere Layouts von Kopf- und Fußzeilen verwenden Sie die htmlHeader und htmlFooter Eigenschaften stattdessen. Diese akzeptieren rohe HTML-Fragmenten und geben vollen Zugriff auf Typografie, Bilder und Ausrichtung. Das folgende Beispiel zentriert die Seiten-URL fettgedruckt in der Kopfzeile und bettet ein Logobild in der Fußzeile ein:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-headers-footers.js

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

// Start from default render options
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 with a logo
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
};

// Apply custom HTML headers and footers during rendering
await PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("add-html-headers-footers.pdf");
});

IronPDF unterstützt HTML-basierte Kopf- und Fußzeilen und gibt vollen Zugriff auf Branding und Layout auf jeder Seite.

Wie kontrollieren Sie Seitenmaße, Ausrichtung und Ränder? {#page-size-orientation-margins}

Die Eigenschaften margin, paperSize, fitToPaperMode, paperOrientation und grayScale auf ChromePdfRenderOptions steuern das physische Layout jeder gerenderten Seite. Das folgende Beispiel konvertiert die Google-Homepage mit benutzerdefinierten Rändern, A5-Querformat und Graustufenausgabe:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/page-size-orientation.js

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

// Start from default render options
var options = defaultChromePdfRenderOptions();

// Set page margins in millimeters
options.margin = {
  top: 50,
  bottom: 50,
  left: 60,
  right: 60
};

// Configure paper size, fit mode, orientation, and color mode
options.paperSize = PaperSize.A5;
options.fitToPaperMode = FitToPaperModes.FitToPage;
options.paperOrientation = PdfPaperOrientation.Landscape;
options.grayScale = true;

// Render with the customized layout settings
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("set-margins-and-page-size.pdf");
});

Die PaperSize Enumeration umfasst Standardpapiergrößen wie A4, A5, Letter und Legal. Die PdfPaperOrientation Enumeration unterstützt Portrait und Landscape. Diese Einstellungen geben präzise Kontrolle über die Ausgabedimensionen für druckfertige Dokumente.

Wie gehen Sie mit dynamischen Webseiten um? T>{#dynamic-web-pages}

Seiten, die asynchron Inhalte laden — durch JavaScript-Timer, Lazy Loading oder API-Aufrufe — sind möglicherweise nicht vollständig gerendert, wenn IronPDFs Engine sie erfasst. Der WaitFor Mechanismus, konfiguriert über die waitFor Eigenschaft auf ChromePdfRenderOptions, weist den Chrome-Renderer an, bis zum Erreichen bestimmter Bedingungen zu pausieren, bevor die Seite erfasst wird.

Der folgende Codeblock setzt IronPDF auf eine 20-sekündige Wartezeit, bevor die Seiteninhalte erfasst werden:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/waitfor-delay.js

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

// Configure the renderer to wait 20 seconds before capturing
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");
});

Alternativ kann IronPDF so konfiguriert werden, dass es wartet, bis ein bestimmtes DOM-Element erscheint, bevor es rendert. Dies ist nützlich für Seiten, bei denen Inhalte injiziert werden, nachdem ein JavaScript-Framework das Mounting abgeschlossen hat:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/waitfor-element.js

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

// Configure the renderer to wait for a specific DOM element (up to 20 seconds)
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");
});

Die WaitForType.HtmlElement Strategie verwendet einen Standard-CSS-Auswahlquery. Der Renderer überprüft das Vorhandensein des Elements, bis entweder maxWaitTime Millisekunden verstrichen sind oder das Element gefunden wurde — je nachdem, was zuerst eintritt.