Konwertowanie HTML do PDF w Node.js

Zainstaluj bibliotekę IronPDF

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

npm i @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, ustaw właściwość licenseKey na globalnym obiekcie IronPdfGlobalConfig z ważnym kluczem licencyjnym:

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

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 PDFy z ciągów surowego HTMLu. To podejście oferuje największą elastyczność spośród czterech metod, ponieważ ciąg HTML może pochodzić praktycznie z dowolnego miejsca — plików tekstowych, strumieni danych, silnika szablonów HTML lub dynamicznie skonstruowanego oznaczenia.

: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ę, która rozwiązuje się do instancji klasy PdfDocument. Po uzyskaniu instancji, wywołać saveAs z ścieżką pliku docelowego, aby zapisać PDF na dysk. 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, które generuje PdfDocument.fromHtml, wyglądają tak samo jak treści stron internetowych.

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

PdfDocument.fromHtml również akceptuje ś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");

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

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 aktywną stronę internetową jako 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");

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

**PDF wygenerowany po wywołaniu PdfDocument.fromUrl na 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 wybrany plik HTML zawarty w archiwum ZIP na 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 dla 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 dla Node.js">
    </a>
  </body>
</html>

A style.css deklaruje reguły układu strony i czcionki:

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

Przy wywoływaniu fromZip, należy określić ścieżkę do pliku ZIP jako pierwszy argument i obiekt konfiguracji jako drugi. Ustaw właściwość mainHtmlFile na nazwę pliku HTML w archiwum, który powinien 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");
});

**Tworzenie PDF za pomocą PdfDocument.fromZip. Funkcja skutecznie renderuje kod HTML z pliku ZIP wraz z jego dołączonymi zasobami.

Moją ulubioną biblioteką tego typu jest IronPDF. Umożliwia ona szybkie i efektywne manipulowanie plikami PDF. Posiada także wiele cennych funkcji, takich jak eksport do formatu PDF/A i cyfrowe podpisywanie dokumentów PDF.

Milan Jovanovic

Microsoft MVP

Zobacz studium przypadku

IronOCR pozwala nam oszczędzić 40 000 USD rocznie na ręcznym przetwarzaniu, jednocześnie zwiększając produktywność i uwalniając zasoby do zadań o wysokim wpływie. Gorąco polecam.

Brent Matzelle

Dyrektor technologiczny, OPYN

Zobacz studium przypadku

IronSuite odgrywa kluczową rolę w naszej działalności. Są to narzędzia zwiększające wydajność w całej firmie, w tym tworzenie planów pięter i poprawa zarządzania zapasami.

David Jones

Główny inżynier oprogramowania, Agorus Build

Zobacz studium przypadku

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

Właściwości textHeader i textFooter przyczepiają niestandardowe treści tekstowe do każdej strony nowo renderowanego 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");
});

PDF wygenerowany ze strony głównej Google z zastosowanym niestandardowym tekstowym nagłówkiem i stopką za pomocą textHeader i textFooter.

Dla bogatszych układów nagłówka i stopki, użyć zamiast tego 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");
});

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, i grayScale na 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");
});

Enumeracja PaperSize obejmuje standardowe rozmiary papieru takie jak A4, A5, Letter, i Legal. Enumeracja PdfPaperOrientation wspiera 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 skonfigurowany poprzez właściwość waitFor na ChromePdfRenderOptions, instruuje renderer Chrome, aby pauzował dopóki określone warunki nie zostaną spełnione, 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");
});

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

Strategia WaitForType.HtmlElement używa standardowego selektora zapytań CSS. Renderer sprawdza obecność elementu, dopóki nie miną maxWaitTime milisekundy lub element zostanie znaleziony — cokolwiek nastąpi pierwszy.