HTML zu PDF NodeJS

Erstellen einer PDF-Datei aus einem HTML-String

PdfDocument.fromHtml ist eine Methode, mit der Sie PDFs aus Zeichenketten des rohen Webseiten-Markups generieren können.

Diese Methode bietet die größte Flexibilität der drei Ansätze. Dies liegt daran, dass die Daten im HTML-String praktisch von überall her stammen können: Textdateien, Datenströme, eine HTML-Vorlage, generierte HTML-Daten usw.

Das folgende Codebeispiel veranschaulicht die praktische Anwendung der Methode 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");

Wie oben gezeigt, rufen wir die Methode PdfDocument.fromHtml mit einer Textzeichenfolge auf, die den Markup-Code für ein Überschriftenelement der ersten Ebene enthält.

PdfDocument.fromHtml gibt ein Promise zurück, das zu einer Instanz der Klasse PdfDocument aufgelöst wird. Ein PdfDocument stellt eine PDF-Datei dar, die die Bibliothek aus einem Quellinhalt erzeugt hat. Diese Klasse bildet den Grundstein für die meisten Kernfunktionen von IronPDF und ist die Grundlage für bedeutende Anwendungsfälle bei der Erstellung und Bearbeitung von PDFs.

Zum Schluss verwenden wir die saveAs Methode des PdfDocument , um die Datei auf der Festplatte zu speichern. Die gespeicherte PDF-Datei wird unten angezeigt.

Abbildung 2 The PDF generated from the HTML string "<h1>Hello from IronPDF!</h1>". Die von PdfDocument.fromHtml generierten PDF-Dateien sehen genauso aus wie Webseiteninhalte.

Erstellen einer PDF-Datei aus einer HTML-Datei

PdfDocument.fromHtml funktioniert nicht nur mit HTML-Zeichenketten. Die Methode akzeptiert auch einen Pfad zu einem lokalen HTML-Dokument.

In unserem nächsten Beispiel werden wir mit dieser Beispielwebseite arbeiten.

Abbildung 3 Unsere Beispiel-HTML-Seite, wie sie in Google Chrome angezeigt wird. Laden Sie diese und ähnliche Seiten von der Webseite "File Samples" herunter:https://filesamples.com/samples/code/html/sample2.html

Die folgenden Codezeilen konvertieren das gesamte Beispieldokument in eine PDF-Datei. Anstelle einer HTML-Zeichenkette rufen wir PdfDocument.fromHtml mit einem gültigen Dateipfad zu unserer Beispieldatei auf:

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

Den Inhalt der resultierenden PDF-Datei haben wir unten eingefügt. Beachten Sie, dass IronPDF nicht nur das Erscheinungsbild des ursprünglichen HTML-Dokuments beibehält, sondern auch die Funktionalität von Links, Formularen und anderen gängigen interaktiven Elementen.

Abbildung 4 Dieses PDF wurde aus dem vorherigen Codebeispiel generiert. Vergleichen Sie das Aussehen mit dem vorherigen Bild und beachten Sie die bemerkenswerte Ähnlichkeit!

Wenn Sie den Quellcode der Beispielseite untersucht haben, werden Sie feststellen, dass er komplexer ist. Es verwendet mehr Arten von HTML-Elementen (Absätze, ungeordnete Listen, Zeilenumbrüche, horizontale Linien, Hyperlinks, Bilder usw.) und beinhaltet auch einige Skripte (die zum Setzen von Cookies verwendet werden).

IronPDF ist in der Lage, Webinhalte darzustellen, die weitaus komplexer sind als das, was wir bisher verwendet haben. Um dies zu veranschaulichen, betrachten wir die folgende Seite:

Abbildung 5 Ein Artikel über Puppeteer, eine Node-Bibliothek, die durch ihre Fähigkeit bekannt wurde, Chrome programmatisch über eine Headless-Browser-Instanz zu steuern

Die oben abgebildete Seite ist die eines Artikels über die Puppeteer Node Library. Puppeteer führt Headless-Browser-Sitzungen aus, die Node-Entwickler nutzen, um zahlreiche Browseraufgaben serverseitig oder clientseitig zu automatisieren (eine davon ist die serverseitige HTML-PDF-Generierung).

Die neue Seite verwendet zahlreiche Ressourcen (CSS-Dateien, Bilder, Skriptdateien usw.) und ein noch komplexeres Layout. Im nächsten Beispiel konvertieren wir eine gespeicherte Kopie dieser Seite (samt der zugehörigen Quelldateien) in ein pixelgenaues PDF.

Der folgende Codeausschnitt setzt voraus, dass die Seite im selben Verzeichnis wie unser Projekt unter dem Namen "sample4.html" gespeichert ist:

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

Das folgende Bild zeigt die Ergebnisse des obigen Code-Ausschnitts.

Abbildung 6 Wenn es in Google Chrome gut aussieht, dann wird es auch in einer PDF-Datei gut aussehen. Dies umfasst Seitendesigns mit hohem CSS- und JavaScript-Aufwand.

Erstellen einer PDF-Datei aus einer URL

IronPDF kann HTML-Zeichenketten und HTML-Dateien beliebiger Größe und Komplexität konvertieren. Sie sind jedoch nicht darauf beschränkt, nur Rohdaten aus Zeichenketten und Dateien zu verwenden. IronPDF kann auch HTML von einer URL anfordern.

Betrachten Sie den Wikipedia-Artikel unter https://en.wikipedia.org/wiki/PDF .

Abbildung 7 Der Wikipedia-Artikel über das PDF-Format, wie er in einem standardkonformen Webbrowser angezeigt wird.

Verwenden Sie diesen Quellcode, um diesen Wikipedia-Artikel in ein PDF umzuwandeln:

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

Oben verwenden wir PdfDocument.fromUrl um die Webseite mit wenigen Codezeilen in ein PDF umzuwandeln. IronPDF erfasst für Sie den HTML-Code der Webadresse und stellt ihn nahtlos dar. Es werden keine HTML-Dateien oder Textzeichenfolgen benötigt!

 Das PDF, das durch den Aufruf PdfDocument.fromUrl für einen Wikipedia-Artikel generiert wurde. Beachten Sie die Ähnlichkeiten zur ursprünglichen Webseite.

Erstellen einer PDF-Datei aus einem ZIP-Archiv

Verwenden Sie PdfDocument.fromZip , um eine bestimmte HTML-Datei aus einer komprimierten (ZIP-)Datei in eine PDF-Datei zu konvertieren.

Nehmen wir beispielsweise an, wir haben eine Zip-Datei im Projektverzeichnis mit folgender interner Struktur:

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

Die Datei index.html enthält folgenden Code:

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

Die Datei style.css definiert fünf CSS-Regeln:

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

Schließlich zeigt logo.png unser Produktlogo:

Abbildung 9 Das Beispielbild in einer hypothetischen HTML-ZIP-Datei.

Beim Aufruf der Methode fromZip muss im ersten Argument ein gültiger Pfad zur ZIP-Datei angegeben werden, zusammen mit einem JSON-Objekt, das die Eigenschaft mainHtmlFile mit dem Namen der HTML-Datei aus der ZIP-Datei festlegt, die konvertiert werden soll.

Wir konvertieren die index.html-Datei im ZIP-Ordner auf folgende Weise:

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-Erstellung mit Hilfe der Funktion PdfDocument.fromZip . Diese Funktion rendert erfolgreich den im ZIP-File enthaltenen HTML-Code inklusive der darin enthaltenen Assets.

PDF-Ausgabe anpassen

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

PDFs aus dynamischen Webseiten generieren

Bei Webseiten, deren Inhalte nicht sofort verfügbar sind und beim Laden der Seite gerendert werden, kann es erforderlich sein, das Rendern der Seiteninhalte so lange zu unterbrechen, bis bestimmte Bedingungen erfüllt sind.

Beispielsweise möchte der Entwickler möglicherweise eine PDF-Datei generieren, deren Inhalt erst 15 Sekunden nach dem Laden der Seite erscheint. In einem anderen Fall erscheint dieser Inhalt möglicherweise erst, wenn komplexer clientseitiger Code ausgeführt wird.

Um diese beiden Sonderfälle (und viele weitere) zu behandeln, definiert die Node-Version von IronPDF den WaitFor Mechanismus. Entwickler können diese Eigenschaft in ihre ChromePdfRenderOptions -Einstellungen aufnehmen, um die Chrome-Rendering-Engine von IronPDF anzuweisen, den Inhalt einer Seite zu konvertieren, wenn bestimmte Ereignisse eintreten.

Der folgende Codeblock weist IronPDF an, 20 Sekunden zu warten, bevor der Inhalt unserer Homepage als PDF erfasst wird:

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

Der nächste Codeblock konfiguriert IronPDF so, dass es wartet, bis ein Element in einem gängigen SEO-Texteditor erfolgreich ausgewählt werden kann.

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