Zainstaluj bibliotekę IronPDF

Zainstaluj pakiet Node.js IronPDF, uruchamiając poniższą komendę NPM w wybranym projekcie Node.js:

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

Możesz także pobrać i zainstalować pakiet IronPDF ręcznie.

Jak zainstalować IronPDF Engine?

IronPDF for Node.js wymaga binarnego silnika IronPDF do działania.

Zainstaluj binarny plik IronPDF Engine, instalując odpowiedni pakiet dla swojego systemu operacyjnego.

Jak zastosować klucz licencyjny?

Domyślnie IronPDF oznacza wszystkie generowane lub modyfikowane dokumenty znakiem wodnym. Aby usunąć znak wodny, należy ustawić właściwość licenseKey w globalnym obiekcie IronPdfGlobalConfig przy użyciu prawidłowego klucza licencyjnego:

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

Uzyskaj bezpłatny klucz licencyjny na okres próbny lub kup klucz licencyjny na stronie licencjonowania.

Pozostałe przykłady kodu w tym samouczku zakładają, że klucz licencyjny został zastosowany w oddzielnym pliku config.js, który jest importowany na początku każdego skryptu:

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

Uzyskaj klucz licencyjny na ironpdf.com/nodejs/licensing/, aby generować dokumenty PDF bez znaków wodnych.

Jak utworzyć PDF z łańcucha HTML? {#create-PDF-from-html-string}

PdfDocument.fromHtml generuje pliki PDF na podstawie ciągów surowego kodu HTML. To podejście zapewnia największą elastyczność spośród czterech metod, ponieważ ciąg HTML może pochodzić praktycznie z dowolnego źródła — plików tekstowych, strumieni danych, silnika szablonów HTML lub dynamicznie tworzonego kodu.

//: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 zwraca obietnicę (Promise), która rozstrzyga się na instancję klasy PdfDocument. Po uzyskaniu instancji wywołaj saveAs z docelową ścieżką pliku, aby zapisać plik PDF na dysku. Zapisany plik PDF renderuje HTML dokładnie tak, jak przeglądarka zgodna ze standardami by go wyświetliła.

The PDF generated from the HTML string <h1>Hello from IronPDF!</h1>. Pliki PDF generowane przez PdfDocument.fromHtml wyglądają tak samo, jak wyglądałaby zawartość strony internetowej.

Jak utworzyć PDF z pliku HTML? {#create-pdf-from-html-file}

PdfDocument.fromHtml akceptuje również ścieżkę do lokalnego dokumentu HTML. Zamiast łańcucha oznaczenia, podaj jako pierwszy argument prawidłową ścieżkę pliku. Jest to preferowane podejście przy pracy z zapisanymi stronami internetowymi, które odnoszą się do lokalnych zasobów CSS, JavaScript i obrazów.

Poniższy przykład konwertuje przykładową stronę internetową na 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");

Przykładowa strona HTML, jak pokazuje ją Google Chrome. Pobierz tę i podobne strony z witryny File Samples: https://filesamples.com/samples/code/html/sample2.html

IronPDF zachowuje wygląd oryginalnego dokumentu HTML i utrzymuje funkcjonalność linków, formularzy i innych interaktywnych elementów. Ta wierność rozciąga się na złożone strony zawierające akapity, listy, obrazy, hiperłącza i skrypty po stronie klienta.

Ten PDF został wygenerowany z przykładu pliku HTML powyżej. Porównaj jego wygląd z poprzednim obrazem — IronPDF zachowuje układ z wysoką wiernością.

IronPDF obsługuje strony, które wykraczają poza prosty markup. Poniższy przykład konwertuje stronę z licznymi zewnętrznymi plikami CSS, obrazami i zasobami skryptów:

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

Jeśli wygląda dobrze w Google Chrome, będzie wyglądać dobrze po przekonwertowaniu na PDF. Obejmuje to projekty stron intensywnie korzystających z CSS i renderowanych przez JavaScript.

Jak utworzyć PDF z URL-a? {#create-PDF-from-url}

PdfDocument.fromUrl pobiera i renderuje aktualną stronę internetową jako plik PDF. Przekaż dowolny publicznie dostępny URL jako argument. Silnik renderujący Chrome w IronPDF pobiera stronę, ładuje wszystkie zasoby i tworzy PDF o idealnej jakości — nie jest wymagane ręczne pobieranie HTML.

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

Artykuł z Wikipedii dotyczący formatu PDF, jaki wygląda w przeglądarce zgodnej ze standardami.

**Plik PDF wygenerowany po wywołaniu PdfDocument.fromUrl w artykule Wikipedii. Zwróć uwagę na jego dużą zgodność z oryginalną stroną internetową.

Jak utworzyć PDF z archiwum Zip? {#create-pdf-from-zip}

PdfDocument.fromZip konwertuje określony plik HTML zawarty w archiwum ZIP na plik PDF. Jest to szczególnie przydatne podczas dystrybucji samodzielnych projektów HTML, które łączą swoje zasoby HTML, CSS i obrazy razem.

Dla tego przykładu załóż, że katalog projektu zawiera plik ZIP o następującej strukturze:

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

Plik index.html zawiera:

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

A style.css określa układ strony i zasady dotyczące czcionek:

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

Przykładowy obraz wewnątrz hipotetycznego pliku ZIP HTML.

Podczas wywoływania fromZip należy podać ścieżkę do pliku ZIP jako pierwszy argument, a obiekt konfiguracyjny jako drugi. Ustaw właściwość mainHtmlFile na nazwę pliku HTML w archiwum, który ma zostać przekonwertowany:

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

**Tworzenie plików PDF przy użyciu PdfDocument.fromZip. Funkcja skutecznie renderuje kod HTML z pliku ZIP wraz z jego dołączonymi zasobami.

Jak dodać nagłówki i stopki? {#add-headers-footers}

Właściwości textHeader i textFooter dołączają niestandardową treść tekstową do każdej strony nowo wyrenderowanego pliku PDF. Poniższy przykład tworzy PDF z głównej strony wyszukiwania Google z niestandardowym nagłówkiem i stopką, każda z użyciem innej czcionki:

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

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

PDF wygenerowany ze strony głównej Google z niestandardowym nagłówkiem i stopką tekstową zastosowanymi przy użyciu textHeader i textFooter.

Aby uzyskać bogatsze układy nagłówków i stopek, należy zamiast tego użyć właściwości htmlHeader i htmlFooter. Akceptują one surowe fragmenty HTML, dając pełną kontrolę nad typografią, obrazami i wyrównaniem. Poniższy przykład wyśrodkowuje URL strony na nagłówku pisanym pogrubioną czcionką oraz osadza obraz logo w stopce:

//: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 obsługuje nagłówki i stopki oparte na HTML, dając pełną kontrolę nad marką i układem na każdej stronie.

Jak kontrolować rozmiar strony, orientację i marginesy? {#page-size-orientation-margins}

Właściwości margin, paperSize, fitToPaperMode, paperOrientation oraz grayScale w ChromePdfRenderOptions kontrolują fizyczny układ każdej renderowanej strony. Poniższy przykład konwertuje stronę główną Google z niestandardowymi marginesami, orientacją krajobrazową A5 i wyjściem w odcieniach szarości:

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

Wykaz PaperSize obejmuje standardowe rozmiary papieru, takie jak A4, A5, Letter i Legal. Wyliczenie PdfPaperOrientation obsługuje Portrait i Landscape. Te ustawienia dają precyzyjną kontrolę nad wymiarami wyjściowymi dla dokumentów gotowych do druku.

Jak obsłużyć dynamiczne strony internetowe? {#dynamic-web-pages}

Strony ładujące treść asynchronicznie — przez zegary JavaScript, lazy loading lub wywołania API — mogą nie być w pełni renderowane w momencie, gdy silnik IronPDF je rejestruje. Mechanizm WaitFor, konfigurowany za pomocą właściwości waitFor w ChromePdfRenderOptions, nakazuje rendererowi Chrome wstrzymanie się do momentu spełnienia określonych warunków przed przechwyceniem strony.

Poniższy blok kodu ustawia IronPDF na czekanie 20 sekund przed zarejestrowaniem treści strony:

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

Alternatywnie, skonfiguruj IronPDF, aby czekał, aż określony element DOM pojawi się przed renderowaniem. To jest przydatne w przypadku stron, gdzie treść jest wstrzykiwana po zakończeniu montowania przez framework JavaScript:

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

Strategia WaitForType.HtmlElement wykorzystuje standardowy selektor zapytań CSS. Renderer sprawdza obecność elementu do momentu upływu maxWaitTime milisekund lub znalezienia elementu — w zależności od tego, co nastąpi wcześniej.