HTML do PDF Node.js

Zainstaluj bibliotekę IronPDF dla Node.js

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

npm install @ironsoftware/ironpdf

npm install @ironsoftware/ironpdf

Możesz również pobrać i zainstalować pakiet IronPDF ręcznie.

Zainstaluj ręcznie silnik IronPDF (opcjonalnie)

IronPDF dla Node.js obecnie wymaga binariów silnika IronPDF, aby działał prawidłowo.

Zainstaluj binaria silnika IronPDF instalując odpowiedni pakiet dla swojego systemu operacyjnego:

Zastosuj klucz licencyjny (opcjonalnie)

Domyślnie, IronPDF oznaczy wszystkie dokumenty, które generuje lub modyfikuje, tłem z napisem tytułowym.

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

Aby używać IronPDF bez dodatkowego znaku wodnego, musisz ustawić właściwość licenseKey na globalnym obiekcie IronPdfGlobalConfig z ważnym kluczem licencyjnym. Kod źródłowy do realizacji tego procesu jest podany poniżej:

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

Zakup klucz licencyjny z naszej strony licencyjnej lub skontaktuj się z nami, aby otrzymać bezpłatny klucz licencyjny próbny.

Następujące sekcje tego poradnika przyjmą, że mamy klucz licencyjny i ustawiliśmy go w oddzielnym pliku JavaScript o nazwie config.js. Importujemy ten skrypt tam, gdzie będziemy korzystać z funkcjonalności 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
// ...

Utwórz plik PDF z ciągu HTML

PdfDocument.fromHtml to metoda, która umożliwia generowanie PDF z ciągów surowego kodu strony internetowej.

Ta metoda oferuje największą elastyczność ze wszystkich trzech podejść. Jest to możliwe, ponieważ dane w ciągu HTML mogą pochodzić praktycznie z każdego źródła: plików tekstowych, strumieni danych, szablonu HTML, wygenerowanych danych HTML, itd.

Przykład kodu poniżej pokazuje, jak używać metody PdfDocument.fromHtml w praktyce:

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

Jak pokazano powyżej, wywołujemy metodę PdfDocument.fromHtml z ciągiem tekstowym zawierającym kod znaczników dla elementu nagłówka poziomu pierwszego.

PdfDocument.fromHtml zwraca Promisę, która rozwiązuje się do instancji klasy PdfDocument. Obiekt PdfDocument reprezentuje plik PDF, który biblioteka wygenerowała z jakiejś treści źródłowej. Ta klasa jest fundamentem większości podstawowych funkcji IronPDF, napędzając znaczne możliwości tworzenia i edytowania PDF.

Na końcu używamy metody saveAs na PdfDocument, aby zapisać plik na dysku. Zapisany plik PDF jest pokazany poniżej.

The PDF generated from the HTML string "<h1>Hello from IronPDF!</h1>". Pliki PDF, które generuje PdfDocument.fromHtml, wyglądają dokładnie tak, jak treść strony internetowej.

Utwórz plik PDF z pliku HTML

PdfDocument.fromHtml działa nie tylko z ciągami HTML. Metoda ta akceptuje również ścieżkę do lokalnego dokumentu HTML.

W naszym następnym przykładzie będziemy pracować z tą przykładową stroną internetową.

Nasza przykładowa strona HTML tak, jak wygląda w Google Chrome. Pobierz tę stronę i podobne z witryny File Samples: https://filesamples.com/samples/code/html/sample2.html

Poniższe linie kodu konwertują cały przykładowy dokument na PDF. Zamiast ciągu HTML, wywołujemy PdfDocument.fromHtml z prawidłową ścieżką do naszego przykładowego pliku:

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

W poniżej uwzględniono zawartość powstałego pliku PDF. Zauważ, że IronPDF nie tylko zachowuje wygląd oryginalnego dokumentu HTML, ale także zachowuje funkcjonalność linków, formularzy i innych typowych interaktywnych elementów.

PDF wygenerowany z poprzedniego przykładu kodu. Porównaj jego wygląd z poprzednim obrazem i zwróć uwagę na niezwykłe podobieństwo!

Jeśli przyjrzysz się kodowi źródłowemu przykładowej strony, zauważysz, że jest on bardziej złożony. Używa więcej rodzajów elementów HTML (akapitów, nieuporządkowanych list, przełamań wierszy, poziomych linii, hiperłączy, obrazów itd.) oraz zawiera pewną ilość skryptów (używanych do ustawiania ciasteczek).

IronPDF jest w stanie renderować treści sieciowe, które są znacznie bardziej złożone niż te, których dotąd używaliśmy. Aby to zademonstrować, rozważmy następującą stronę:

Artykuł napisany o Puppeteer, bibliotece Node popularnej ze względu na jej zdolność do programowego kontrolowania Chrome za pomocą instancji przeglądarki bezgłowej

Zawarta powyżej strona to artykuł napisany o Puppeteer, bibliotece Node. Puppeteer obsługuje sesje przeglądarki bezgłowej, które programiści Node używają do automatyzacji wielu zadań przeglądarki po stronie serwera lub po stronie klienta (jedno z nich obejmuje generowanie HTML na PDF po stronie serwera).

Nowa strona pozyskuje wiele zasobów (pliki CSS, obrazy, pliki skryptów itd.) i wykorzystuje jeszcze bardziej złożony układ. W tym następnym przykładzie zrealizujemy konwersję zapisanej kopii tej strony (wraz z jej zasobami źródłowymi) na doskonały co do piksela PDF.

Poniższy fragment kodu zakłada, że strona jest zapisana w tym samym katalogu co nasz projekt jako "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");
});

Poniższy obraz pokazuje wyniki powyższego fragmentu kodu.

Jeśli dobrze wygląda w Google Chrome, to będzie dobrze wyglądało po konwersji na PDF. Obejmuje to projekty stron bogatych w CSS i JavaScript.

Utwórz plik PDF z adresu URL

IronPDF jest w stanie konwertować ciągi HTML i pliki HTML o dowolnym rozmiarze i złożoności. Nie jesteś ograniczony tylko do używania surowego kodu ze ciągów i plików. IronPDF może również żądać HTML z adresu URL.

Rozważ artykuł z Wikipedii pod adresem https://en.wikipedia.org/wiki/PDF.

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

Użyj tego kodu źródłowego, aby przekonwertować ten artykuł z Wikipedii na 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");

Powyżej używamy PdfDocument.fromUrl, aby przekonwertować stronę internetową na PDF w kilku liniach kodu. IronPDF pobierze dla ciebie kod HTML dla adresu internetowego i renderuje go bezproblemowo. Nie są wymagane pliki HTML ani ciągi tekstowe!

 PDF wygenerowany z wywołania PdfDocument.fromUrl artykułu z Wikipedii. Zwróć uwagę na jego podobieństwo do oryginalnej strony internetowej.

Utwórz plik PDF z archiwum Zip

Użyj PdfDocument.fromZip, aby przekonwertować określony plik HTML znajdujący się w skompresowanym pliku (zip) na PDF.

Załóżmy na przykład, że w katalogu projektu znajduje się plik ZIP o następującej strukturze wewnętrznej:

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

Plik index.html zawiera następujący kod:

<!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>

Plik style.css deklaruje pięć reguł 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;
}

Na koniec, plik logo.png przedstawia logo naszego produktu:

Przykładowy obrazek w hipotetycznym pliku HTML w formacie ZIP.

Podczas wywoływania metody fromZip należy określić prawidłową ścieżkę do zip w pierwszym argumencie, wraz z obiektem JSON, który ustawia właściwość mainHtmlFile z nazwą pliku HTML z zip, który chcemy przekonwertować.

W podobny sposób konwertujemy plik index.html znajdujący się w folderze ZIP:

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

 Tworzenie PDF za pomocą funkcji PdfDocument.fromZip. Ta funkcja z powodzeniem renderuje kod HTML zawarty w pliku ZIP wraz z zawartymi w nim zasobami.

Dostosuj wynik generowania plików 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");
});

Generowanie plików PDF z dynamicznych stron internetowych

W przypadku stron internetowych zawierających treści, które nie są od razu dostępne i renderowane po załadowaniu strony, może być konieczne wstrzymanie renderowania treści tej strony do momentu spełnienia określonych warunków.

Na przykład programista może chcieć wygenerować plik PDF zawierający treść, która pojawia się dopiero 15 sekund po załadowaniu strony. W innym przypadku ta sama treść może pojawić się dopiero po wykonaniu złożonego kodu po stronie klienta.

Aby obsłużyć oba te przypadki brzegowe (i wiele innych), wydanie Node IronPDF definiuje mechanizm WaitFor. Programiści mogą uwzględnić tę właściwość w swoich ustawieniach ChromePdfRenderOptions, aby przekazać silnikowi renderowania Chrome IronPDF instrukcję dotycząca konwersji zawartości strony, gdy wystąpią określone zdarzenia.

Poniższy fragment kodu ustawia IronPDF tak, aby odczekał 20 sekund przed przechwyceniem zawartości naszej strony głównej jako pliku 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");
});

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

Poniższy fragment kodu konfiguruje IronPDF tak, aby czekał, aż element w popularnym edytorze tekstu SEO zostanie pomyślnie zaznaczony.

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