HTML을 PDF로 변환하는 Node.js

Node.js 용 IronPDF 라이브러리를 설치하세요.

선택한 Node 프로젝트에서 아래의 NPM 명령어를 실행하여 IronPDF Node.js 패키지를 설치하세요.

npm install @ironsoftware/ironpdf

npm install @ironsoftware/ironpdf

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

IronPDF 엔진을 수동으로 설치합니다(선택 사항).

Node.js 용 IronPDF 제대로 작동하려면 현재 IronPDF 엔진 바이너리가 필요합니다.

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

라이선스 키 적용(선택 사항)

기본적으로 IronPDF 생성하거나 수정하는 모든 문서에 제목이 포함된 배경 워터마크를 삽입합니다.

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

IronPDF의 워터마크 추가 브랜딩 없이 사용하려면 전역 IronPdfGlobalConfig 객체에 유효한 라이선스 키를 설정해야 합니다. 이 기능을 구현하는 데 사용된 소스 코드는 아래와 같습니다.

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

라이선스 페이지에서 라이선스 키를 구매하시거나 , 무료 평가판 라이선스 키를 받으시 려면 저희에게 문의하십시오.

이 튜토리얼의 다음 섹션에서는 라이선스 키가 있고, 해당 키를 _config.js_라는 별도의 JavaScript 파일에 설정했다고 가정합니다. IronPDF 기능을 사용할 때마다 이 스크립트를 가져옵니다.

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

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

HTML 문자열에서 PDF 파일 생성

PdfDocument.fromHtml은 원시 웹 페이지 마크업의 문자열에서 PDF를 생성할 수 있게 하는 메서드입니다.

이 방법은 세 가지 접근 방식 중 가장 유연성이 뛰어납니다. 이는 HTML 문자열의 데이터가 텍스트 파일, 데이터 스트림, HTML 템플릿, 생성된 HTML 데이터 등 사실상 어디에서든 가져올 수 있기 때문입니다.

다음 코드 예제는 PdfDocument.fromHtml 메서드를 실제로 사용하는 방법을 보여줍니다:

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

위에서 볼 수 있듯이, 우리는 레벨 1 헤드라인 요소의 마크업 코드가 포함된 텍스트 문자열과 함께 PdfDocument.fromHtml 메서드를 호출합니다.

PdfDocument.fromHtml은 PdfDocument 클래스의 인스턴스로 해결되는 Promise를 반환합니다. A PdfDocument은 라이브러리가 어떤 소스 콘텐츠에서 생성한 PDF 파일을 나타냅니다. 이 클래스는 IronPDF의 핵심 기능 대부분의 기반을 형성하며, 중요한 PDF 생성 및 편집 사용 사례를 지원합니다.

마침내, 우리는 PdfDocument에 있는 saveAs 메서드를 사용하여 파일을 디스크에 저장합니다. 저장된 PDF 파일은 아래와 같습니다.

**The PDF generated from the HTML string "<h1>Hello from IronPDF!</h1>". PdfDocument.fromHtml이 생성한 PDF 파일은 웹 페이지 콘텐츠가 나타나는 것처럼 나타납니다.

HTML 파일에서 PDF 파일 생성

PdfDocument.fromHtml은 HTML 문자열과만 작동하지 않습니다. 이 메서드는 로컬 HTML 문서의 경로도 인수로 받습니다.

다음 예제에서는 이 샘플 웹페이지를 사용해 보겠습니다.

구글 Chrome에서 보이는 샘플 HTML 페이지입니다. 파일 샘플 웹사이트에서 이 페이지와 유사한 페이지를 다운로드하세요.https://filesamples.com/samples/code/html/sample2.html

다음 코드는 샘플 문서 전체를 PDF로 변환합니다. HTML 문자열 대신에, 우리는 샘플 파일의 유효한 파일 경로와 함께 PdfDocument.fromHtml을 호출합니다:

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

생성된 PDF 파일의 내용을 아래에 첨부했습니다. IronPDF 원본 HTML 문서의 모양뿐만 아니라 링크, 양식 및 기타 일반적인 상호 작용 요소의 기능까지 그대로 유지한다는 점에 유의하십시오.

이 PDF 파일은 이전 코드 예제를 기반으로 생성되었습니다. 이전 이미지와 비교해 보면 놀라운 유사성을 알 수 있습니다!

샘플 페이지의 소스 코드를 살펴보셨다면, 코드가 훨씬 더 복잡하다는 것을 알 수 있을 것입니다. 이 웹페이지는 단락, 순서 없는 목록, 줄 바꿈, 가로선, 하이퍼링크, 이미지 등 더 다양한 HTML 요소를 사용하며, 쿠키 설정을 위한 스크립트도 일부 포함하고 있습니다.

IronPDF 우리가 지금까지 사용해 온 것보다 훨씬 더 복잡한 웹 콘텐츠를 렌더링할 수 있습니다. 이를 설명하기 위해 다음 페이지를 살펴보겠습니다.

Puppeteer에 대한 기사입니다. Puppeteer는 헤드리스 브라우저 인스턴스를 사용하여 Chrome을 프로그래밍 방식으로 제어할 수 있는 기능으로 인기를 얻은 Node 라이브러리입니다.

위 그림은 Puppeteer Node 라이브러리에 대해 작성된 기사의 일부입니다. Puppeteer는 Node 개발자가 서버 측 또는 클라이언트 측에서 다양한 브라우저 작업을 자동화하는 데 사용하는 헤드리스 브라우저 세션을 실행합니다(서버 측 HTML PDF 생성 포함).

새 페이지는 수많은 에셋(CSS 파일, 이미지, 스크립트 파일 등)을 사용하며 훨씬 더 복잡한 레이아웃을 채택하고 있습니다. 다음 예시에서는 이 페이지의 저장된 사본(원본 에셋 포함)을 픽셀 단위까지 완벽한 PDF로 변환해 보겠습니다.

아래 코드 조각은 페이지가 "sample4.html"이라는 이름으로 프로젝트와 동일한 디렉토리에 저장되었다고 가정합니다.

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

다음 이미지는 위 코드 조각의 실행 결과를 보여줍니다.

구글 Chrome에서 보기 좋으면 PDF로 변환했을 때도 보기 좋을 것입니다. 여기에는 CSS와 JavaScript를 많이 사용하는 페이지 디자인이 포함됩니다.

URL에서 PDF 파일 생성

IronPDF 크기와 복잡성에 관계없이 모든 HTML 문자열 및 HTML 파일을 변환할 수 있습니다. 하지만 문자열이나 파일에서 가져온 원시 마크업만 사용해야 하는 것은 아닙니다. IronPDF URL에서 HTML을 요청할 수도 있습니다.

https://en.wikipedia.org/wiki/PDF 에 있는 위키백과 문서를 참고하십시오.

표준을 준수하는 웹 브라우저에서 보이는 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");

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

위에서는 몇 줄의 코드로 웹 페이지를 PDF로 변환하기 위해 PdfDocument.fromUrl을 사용합니다. IronPDF 웹 주소의 HTML 코드를 자동으로 추출하여 매끄럽게 렌더링해 줍니다. HTML 파일이나 텍스트 문자열은 필요하지 않습니다!

 위키피디아 기사에서 PdfDocument.fromUrl을 호출하여 생성된 PDF. 원본 웹페이지와의 유사점을 주목하십시오.**

압축 파일에서 PDF 파일 생성하기

특정 HTML 파일을 압축된 (zip) 파일 내에 있는 PDF로 변환하기 위해 PdfDocument.fromZip을 사용하세요.

예를 들어, 프로젝트 디렉터리에 다음과 같은 내부 구조를 가진 Zip 파일이 있다고 가정해 보겠습니다.

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

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>

<!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 파일에는 다섯 가지 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;
}

마지막으로 logo.png 파일은 저희 제품 로고를 보여줍니다.

가상의 HTML 압축 파일 안에 있는 샘플 이미지입니다.

fromZip 메서드를 호출할 때, 첫 번째 인수로 zip의 유효한 경로를 지정하고, mainHtmlFile 속성이 변환하고자 하는 zip에서 HTML 파일의 이름으로 설정된 JSON 객체를 함께 지정해야 합니다.

압축 폴더 안의 index.html 파일도 같은 방식으로 변환합니다.

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

 PDF 생성은 PdfDocument.fromZip 함수를 사용하여 이루어집니다. 이 함수는 ZIP 파일에 포함된 HTML 코드와 그 안에 포함된 자산들을 성공적으로 렌더링합니다.**

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

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

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

동적 웹 페이지에서 PDF 생성

웹 페이지 로드 시 즉시 사용 가능하고 렌더링되지 않는 콘텐츠를 포함하는 웹 페이지의 경우, 특정 조건이 충족될 때까지 해당 페이지 콘텐츠의 렌더링을 일시 중지해야 할 수 있습니다.

예를 들어, 개발자는 페이지가 로드된 후 15초가 지나서야 콘텐츠가 나타나는 PDF를 생성하고 싶을 수 있습니다. 또 다른 경우에는, 이 동일한 콘텐츠가 복잡한 클라이언트 측 코드가 실행된 후에만 나타날 수도 있습니다.

이 두 가지 엣지 케이스 (및 그 외 많은)를 처리하기 위해, IronPDF의 Node 릴리스는 WaitFor 메커니즘을 정의합니다. 개발자는 특정 이벤트가 발생할 때 페이지의 콘텐츠를 변환하도록 IronPDF의 Chrome Rendering 엔진에 지시하는 ChromePdfRenderOptions 설정에 이 속성을 포함할 수 있습니다.

다음 코드 블록은 IronPDF 홈페이지 콘텐츠를 PDF로 캡처하기 전에 20초 동안 대기하도록 설정합니다.

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

다음 코드 블록은 IronPDF 인기 있는 SEO 텍스트 편집기 에서 요소가 성공적으로 선택될 때까지 기다리도록 구성합니다.

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