HTML을 PDF로 변환하는 NodeJS

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를 반환합니다. PdfDocument는 도서관이 특정 소스 콘텐츠에서 생성한 PDF 파일을 나타냅니다. 이 클래스는 IronPDF의 핵심 기능 대부분의 기반을 형성하며, 중요한 PDF 생성 및 편집 사용 사례를 지원합니다.

마지막으로, saveAs 메서드를 PdfDocument에 사용하여 파일을 디스크에 저장합니다. 저장된 PDF 파일은 아래와 같습니다.

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

HTML 파일에서 PDF 파일 생성

PdfDocument.fromHtml는 HTML 문자열에서만 작동하는 것이 아닙니다. 이 메서드는 로컬 HTML 문서의 경로도 인수로 받습니다.

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

구글 크롬에서 보이는 샘플 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");
});

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

구글 크롬에서 보기 좋으면 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");

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

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

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

압축 파일(zip)에 있는 특정 HTML 파일을 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 파일 경로를 지정하고, 두 번째 인수로 변환하려는 zip 파일 내의 HTML 파일 이름을 mainHtmlFile 속성에 설정하는 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");
});

 PdfDocument.fromZip 함수를 사용한 PDF 생성. 이 함수는 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 렌더링 엔진이 페이지 콘텐츠를 변환하도록 지시하기 위해 이 속성을 설정에 포함할 수 있습니다.

다음 코드 블록은 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");
});