Installieren Sie die IronPDF-Bibliothek

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

//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/install.sh
npm install @ironsoftware/ironpdf

//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/install.sh
npm install @ironsoftware/ironpdf

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

Wie installiert man 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 für Ihr Betriebssystem geeignete Paket installieren.

Wie wendet man einen Lizenzschlüssel an?

Standardmäßig versieht IronPDF alle Dokumente, die es erstellt oder bearbeitet, mit einem Wasserzeichen. Um das Wasserzeichen zu entfernen, setzen Sie die Eigenschaft licenseKey des globalen Objekts IronPdfGlobalConfig auf einen 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}";

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

Beziehen Sie eine kostenlose Testlizenz oder erwerben Sie einen Lizenzschlüssel auf der Lizenzierungsseite.

Die verbleibenden Code-Beispiele in diesem Tutorial gehen davon aus, dass ein Lizenzschlüssel in einer separaten config.js-Datei hinterlegt 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
// ...

//: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
// ...

Beziehen Sie einen Lizenzschlüssel unter ironpdf.com/nodejs/licensing/, um PDF-Dokumente ohne Wasserzeichen zu erstellen.

Wie erstellt man eine PDF-Datei aus einer HTML-Zeichenkette? {#create-PDF-from-html-string}

PdfDocument.fromHtml generiert PDFs aus reinen HTML-Markup-Zeichenfolgen. Dieser Ansatz bietet die größte Flexibilität der vier Methoden, da die HTML-Zeichenfolge praktisch von überall her stammen kann – aus Textdateien, Datenströmen, einer HTML-Template-Engine oder dynamisch erstellten Markups.

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

//: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 Klasse PdfDocument aufgelöst wird. Rufen Sie nach dem Abrufen der Instanz saveAs mit einem Zielpfad auf, um die PDF-Datei auf die Festplatte zu schreiben. Die gespeicherte PDF-Datei gibt den HTML-Code genau so wieder, wie ihn 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 sehen genauso aus wie der Inhalt einer Webseite.

Wie erstellt man eine PDF-Datei aus einer HTML-Datei? {#create-pdf-from-html-file}

PdfDocument.fromHtml akzeptiert auch einen Pfad zu einem lokalen HTML-Dokument. Anstelle einer Markup-Zeichenkette übergeben Sie bitte einen gültigen Dateipfad als erstes Argument. Dies ist der bevorzugte Ansatz bei der Arbeit mit gespeicherten Webseiten, die auf lokale CSS-, JavaScript- und Bilddateien verweisen.

Das folgende Beispiel konvertiert eine Beispiel-Webseite 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");

//: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 angezeigt wird. Laden Sie diese und ähnliche Seiten von der Website "File Samples" herunter: https://filesamples.com/samples/code/html/sample2.html

IronPDF bewahrt das Erscheinungsbild des ursprünglichen HTML-Dokuments und behält die Funktionalität von Links, Formularen und anderen interaktiven Elementen bei. Diese Genauigkeit gilt auch für komplexe Seiten, die Absätze, Listen, Bilder, Hyperlinks und clientseitige Skripte enthalten.

Dieses PDF wurde aus der oben stehenden HTML-Datei generiert. Vergleichen Sie das Erscheinungsbild mit dem vorherigen Bild – IronPDF bewahrt das Layout originalgetreu.

IronPDF verarbeitet Seiten, die weit über einfache Markups hinausgehen. Das folgende Beispiel konvertiert eine funktionsreiche Seite, die zahlreiche externe CSS-Dateien, Bilder und Skript-Assets einbindet:

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

//: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, sieht es auch nach der Konvertierung in PDF gut aus. Dies umfasst auch CSS-intensive und JavaScript-gerenderte Seitendesigns.

Wie erstellt man eine PDF-Datei aus einer URL? {#create-pdf-from-url}

PdfDocument.fromUrl ruft eine Live-Webseite ab und rendert sie als PDF. Übergeben Sie eine beliebige öffentlich zugängliche URL als Argument. Die Chrome-Rendering-Engine von IronPDF ruft die Seite ab, lädt alle Assets und erstellt ein pixelgenaues PDF – ein manueller HTML-Download ist nicht 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");

//: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 PDF, das durch den Aufruf von PdfDocument.fromUrl in einem Wikipedia-Artikel generiert wurde. Beachten Sie die große Ähnlichkeit mit der ursprünglichen Webseite.

Wie erstellt man eine PDF-Datei aus einem ZIP-Archiv? {#create-pdf-from-zip}

PdfDocument.fromZip konvertiert eine bestimmte HTML-Datei aus einem ZIP-Archiv in ein PDF. Dies ist besonders nützlich bei der Verteilung eigenständiger HTML-Projekte, die ihre HTML-, CSS- und Bilddateien bündeln.

Nehmen wir für dieses Beispiel an, dass das Projektverzeichnis eine ZIP-Datei mit folgender 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 Datei index.html 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 for 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 for Node.js">
    </a>
  </body>
</html>

Und style.css legt das Seitenlayout und die Schriftartregeln fest:

//: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 in der hypothetischen HTML-ZIP-Datei.

Geben Sie beim Aufruf von fromZip den Pfad zur ZIP-Datei als erstes Argument und ein Konfigurationsobjekt als zweites an. Setzen Sie die Eigenschaft mainHtmlFile 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");
});

//: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 zusammen mit den darin enthaltenen Assets erfolgreich.

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

Die Eigenschaften textHeader und textFooter fügen benutzerdefinierten textbasierten Inhalt auf jeder Seite eines neu gerenderten PDF-Dokuments ein. Das folgende Beispiel erstellt eine PDF-Datei der Google-Suchstartseite mit einer benutzerdefinierten Kopf- und Fußzeile, wobei jeweils eine andere Schriftart verwendet wird:

//: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.Co/urierNew,
  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");
});

//: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.Co/urierNew,
  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 PDF, das von der Google-Startseite generiert wurde, mit einer benutzerdefinierten Textkopf- und Fußzeile, die mithilfe von textHeader und textFooter angewendet wurde.

Für umfangreichere Kopf- und Fußzeilenlayouts verwenden Sie stattdessen die Eigenschaften htmlHeader und htmlFooter. Diese akzeptieren rohe HTML-Fragmente und bieten so volle Kontrolle über Typografie, Bilder und Ausrichtung. Im folgenden Beispiel wird die Seiten-URL fett und zentriert in der Kopfzeile angezeigt und ein Logo-Bild in die Fußzeile eingebettet:

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

//: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 bietet so vollständige Kontrolle über Branding und Layout auf jeder Seite.

Wie steuert man Seitengröß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-Startseite mit benutzerdefinierten Rändern, im A5-Querformat und in Graustufen:

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

//: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 Aufzählung PaperSize umfasst Standardpapierformate wie A4, A5, Letter und Legal. Die PdfPaperOrientation-Enumeration unterstützt Portrait und Landscape. Diese Einstellungen ermöglichen eine präzise Steuerung der Ausgabemaße für druckfertige Dokumente.

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

Seiten, deren Inhalte asynchron geladen werden – über JavaScript-Timer, Lazy Loading oder API-Aufrufe – sind möglicherweise noch nicht vollständig gerendert, wenn die Engine von IronPdf sie erfasst. Der Mechanismus WaitFor, der über die Eigenschaft waitFor auf ChromePdfRenderOptions konfiguriert wird, weist den Chrome-Renderer an, zu pausieren, bis bestimmte Bedingungen erfüllt sind, bevor die Seite erfasst wird.

Der folgende Code-Block legt fest, dass IronPDF 20 Sekunden wartet, bevor der Seiteninhalt erfasst wird:

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

//: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 können Sie IronPDF so konfigurieren, dass es vor dem Rendern wartet, bis ein bestimmtes DOM-Element erscheint. Dies ist nützlich für Seiten, auf denen Inhalte erst nach dem Laden eines JavaScript-Frameworks eingefügt werden:

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

//: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-Abfrage-Selektor. Der Renderer fragt nach dem Vorhandensein des Elements ab, bis maxWaitTime Millisekunden verstrichen sind oder das Element gefunden wird – je nachdem, was zuerst eintritt.