IronPDF 라이브러리 설치하기

선택한 Node.js 프로젝트에서 아래 NPM 명령을 실행하여 IronPDF 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

IronPDF 패키지를 수동으로 다운로드하고 설치 할 수도 있습니다.

IronPDF 엔진을 어떻게 설치합니까?

IronPDF for Node.js는 기능을 수행하기 위해 IronPDF 엔진 바이너리가 필요합니다.

운영 체제에 맞는 적절한 패키지를 설치하여 IronPDF 엔진 바이너리를 설치하십시오.

라이선스 키를 어떻게 적용하나요?

기본적으로, IronPDF는 생성하거나 수정한 모든 문서에 워터마크를 표기합니다. 워터마크를 제거하려면 전역 IronPdfGlobalConfig 객체의 licenseKey 속성을 유효한 라이선스 키로 설정하십시오:

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

무료 체험 라이선스를 받으세요 또는 라이선스 페이지에서 라이선스 키를 구매하십시오.

{i:(라이선스 키 및 기타 글로벌 설정 설정 후 다른 라이브러리 기능을 호출하십시오. 이는 애플리케이션 전반에서 최적의 성능과 올바른 동작을 보장합니다.)}]

이 튜토리얼의 나머지 코드 예제는 별도의 config.js 파일에 라이선스 키가 적용되어 있으며, 각 스크립트 상단에서 이 파일이 임포트된다고 가정합니다:

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

워터마크 없는 PDF 문서를 생성하려면 IronPDF 에서 라이선스 키를 받으세요.

HTML 문자열에서 PDF를 생성하는 방법은? {#create-pdf-from-html-string}

PdfDocument.fromHtml는 원시 HTML 마크업 문자열로부터 PDF를 생성합니다. 이 방식은 HTML 문자열을 텍스트 파일, 데이터 스트림, HTML 템플릿 엔진 또는 동적으로 생성된 마크업 등 사실상 어디서나 가져올 수 있기 때문에 네 가지 방법 중 가장 유연성을 제공합니다.

//: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은 PdfDocument 클래스의 인스턴스로 해결되는 Promise를 반환합니다. 인스턴스를 획득한 후, PDF를 디스크에 작성할 대상 파일 경로를 지정하여 saveAs를 호출하십시오. 저장된 PDF 파일은 표준 준수 브라우저가 표시하는 방식대로 HTML을 정확히 렌더링합니다.

The PDF generated from the HTML string <h1>Hello from IronPDF!</h1>. PdfDocument.fromHtml가 생성하는 PDF 파일은 웹 페이지 콘텐츠가 표시되는 방식과 동일하게 나타납니다.

HTML 파일에서 PDF를 어떻게 만드나요? {#create-pdf-from-html-file}

PdfDocument.fromHtml는 로컬 HTML 문서의 경로도 지원합니다. 마크업 문자열 대신, 유효한 파일 경로를 첫 번째 인수로 전달합니다. 로컬 CSS, JavaScript, 이미지 자산을 참조하는 저장된 웹 페이지를 작업할 때 선호되는 방법입니다.

다음 예제는 샘플 웹 페이지를 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");

Google Chrome에서 나타나는 샘플 HTML 페이지. 다음과 유사한 페이지를 파일 샘플 웹사이트에서 다운로드하세요: https://filesamples.com/samples/code/html/sample2.html

IronPDF는 원본 HTML 문서의 외형을 보존하며 링크, 폼, 기타 상호작용 요소의 기능을 유지합니다. 이 신뢰성은 단락, 목록, 이미지, 하이퍼링크, 클라이언트 측 스크립트가 포함된 복잡한 페이지까지 확장됩니다.

위의 HTML 파일 예제에서 생성된 PDF입니다. 이전 이미지와의 외형을 비교하세요 — IronPDF는 높은 신뢰도로 레이아웃을 보존합니다.

IronPDF는 단순한 마크업을 넘어서 상세한 페이지를 처리합니다. 다음 예제는 많은 외부 CSS 파일, 이미지 및 스크립트 자산을 활용하는 기능이 풍부한 페이지를 변환합니다:

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

Google Chrome에서 좋게 보인다면, PDF로 변환되었을 때도 좋게 보일 것입니다. CSS가 많이 사용되고 JavaScript로 렌더링된 페이지 디자인도 포함됩니다.

URL에서 PDF를 어떻게 만드나요? {#create-PDF-from-url}

PdfDocument.fromUrl는 실시간 웹 페이지를 가져와 PDF로 렌더링합니다. 공개적으로 접근 가능한 URL을 인수로 전달합니다. IronPDF의 Chrome 렌더링 엔진은 페이지를 검색하고, 모든 자산을 로드하며, 수동으로 HTML을 다운로드할 필요 없이 픽셀 완벽한 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");

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

표준을 준수하는 웹 브라우저에서 보이는 PDF 형식에 대한 위키백과 문서입니다.

위키백과 문서에 PdfDocument.fromUrl을 호출하여 생성된 PDF. 원본 웹 페이지와의 유사점을 주목하세요.

ZIP 아카이브에서 PDF를 어떻게 만드나요? {#create-pdf-from-zip}

PdfDocument.fromZip는 ZIP 아카이브에 포함된 특정 HTML 파일을 PDF로 변환합니다. HTML, CSS, 이미지 자산을 함께 번들로 제공하는 자체 포함 HTML 프로젝트를 배포할 때 특히 유용합니다.

이 예제에서는 프로젝트 디렉토리에 다음 구조를 가진 ZIP 파일이 있다고 가정합니다:

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

index.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>

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

그리고 style.css는 페이지 레이아웃과 글꼴 규칙을 정의합니다:

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

가상 HTML ZIP 파일에 포함된 샘플 이미지입니다.

fromZip를 호출할 때는 첫 번째 인수로 ZIP 파일의 경로를, 두 번째 인수로 구성 객체를 지정하십시오. 아카이브 내 변환할 HTML 파일의 이름을 mainHtmlFile 속성에 설정하십시오:

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

PdfDocument.fromZip을 사용한 PDF 생성. 함수는 ZIP 파일에서 번들 자산과 함께 HTML 코드를 성공적으로 렌더링합니다.

머리글과 바닥글을 어떻게 추가합니까? {#add-headers-footers}

textHeader 및 textFooter 속성은 새로 렌더링된 PDF의 모든 페이지에 사용자 정의 텍스트 기반 콘텐츠를 추가합니다. 다음 예제는 각기 다른 글꼴을 사용해 사용자 정의 헤더와 푸터를 추가하여 Google 검색 홈페이지에서 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");
});

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

textHeader 및 textFooter을 사용하여 사용자 정의 텍스트 머리글과 바닥글을 적용한 Google 홈페이지에서 생성된 PDF/A.

더 풍부한 헤더 및 푸터 레이아웃을 원하시면 대신 htmlHeader 및 htmlFooter 속성을 사용하십시오. 이들은 원시 HTML 조각을 허용하여 타이포그래피, 이미지 및 정렬을 완전히 제어할 수 있습니다. 아래 예제는 헤더에 페이지 URL을 굵게 중앙 정렬하고 푸터에 로고 이미지를 삽입합니다:

//: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는 브랜드화 및 레이아웃을 각각의 페이지에서 완벽하게 제어할 수 있게 하는 HTML 기반 헤더와 푸터를 지원합니다.

페이지 크기, 방향 및 여백을 어떻게 제어하나요? {#page-size-orientation-margins}

margin, paperSize, fitToPaperMode, paperOrientation 및 grayScale 속성은 렌더링된 모든 페이지의 물리적 레이아웃을 제어합니다. 다음 예제는 사용자 정의 여백, A5 가로방향, 그레이스케일 출력으로 Google 홈페이지를 변환합니다:

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

PaperSize 열거형에는 A4, A5, Letter 및 Legal와 같은 표준 용지 크기가 포함됩니다. PdfPaperOrientation 열거형은 Portrait 및 Landscape을 지원합니다. 이 설정은 인쇄 준비 문서를 위한 출력 크기에 대한 정확한 제어를 제공합니다.

동적 웹 페이지를 어떻게 처리하나요? {#dynamic-web-pages}

JavaScript 타이머, 지연 로딩, API 호출을 통해 비동기적으로 콘텐츠를 로드하는 페이지는 IronPDF의 엔진이 캡처할 때 완전히 렌더링되지 않을 수 있습니다. WaitFor 속성을 통해 waitFor에 설정된 ChromePdfRenderOptions 메커니즘은 Chrome 렌더러가 지정된 조건이 충족될 때까지 일시 중지한 후 페이지를 캡처하도록 지시합니다.

다음 코드 블록은 IronPDF가 페이지 콘텐츠를 캡처하기 전에 20초 동안 기다리도록 설정합니다:

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

또는 IronPDF가 렌더링 전에 특정 DOM 요소가 나타날 때까지 기다리도록 구성할 수 있습니다. 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");
});

WaitForType.HtmlElement 전략은 표준 CSS 쿼리 선택자를 사용합니다. 렌더러는 maxWaitTime 밀리초가 경과하거나 해당 요소가 발견될 때까지(둘 중 먼저 발생하는 경우) 요소의 존재 여부를 확인합니다.