Zum Fußzeileninhalt springen
NODE-HILFE

JsdomNPM (Wie es für Entwickler funktioniert)

Wenn JSDOM und IronPDF in Node.js kombiniert werden, haben Programmierer Zugriff auf ein umfangreiches Toolkit zum Erstellen und Ändern von PDF-Dokumenten. Eine reine JavaScript-Implementierung des W3C DOM namens JSDOM ermöglicht es, HTML- und XML-Dokumente serverseitig auf eine ähnliche Weise zu manipulieren, wie es in einem Browser möglich ist. Im Gegensatz dazu verwendet IronPDF einfache Node.js APIs, um die Erstellung hochwertiger PDFs aus HTML-Inhalten zu erleichtern.

Die Kombination von JSDOM und IronPDF ermöglicht es Entwicklern, Webseiten innerhalb ihrer Node.js-Anwendungen einfach in PDFs zu transformieren, vorhandene PDFs zu ändern und PDF-Dokumente aus HTML-Vorlagen on-the-fly zu erstellen. Diese Kombination ist eine großartige Option für Projekte, die starke PDF-Erstellungsmöglichkeiten erfordern, da sie nicht nur die Einhaltung moderner Webtechnologien gewährleistet, sondern auch die Generierung von Dokumenten beschleunigt.

Was ist JSDOM NPM?

JSDOM NPM (Node Package Manager) is a JavaScript-Bibliothek, die es Ihnen ermöglicht, Node.js zu verwenden, um HTML-Dokumente zu analysieren und zu bearbeiten. Es bietet eine browserähnliche Umgebung innerhalb von Node.js und unterstützt das W3C DOM (Document Object Model). Daher können Sie die Eigenschaften und Inhalte von HTML- und XML-Dokumenten programmatisch manipulieren. Sie können sogar Aktionen wie Klicks und Formularübermittlungen simulieren.

JSDOM NPM (Wie es für Entwickler funktioniert): Abbildung 1

JSDOM ist sehr hilfreich für Aktivitäten wie das Erstellen von HTML-basierten Berichten, das Testen und Überprüfen von Websites und Web-Scraping. Wenn in einer serverseitigen Umgebung mit HTML-Seiten gearbeitet wird, in der Standard-Browser-Funktionen nicht verfügbar sind, hilft es Entwicklern. Das JSDOM NPM-Paket überbrückt die Lücke zwischen der Browserfunktionalität auf Client-Seite und JavaScript auf Server-Seite, indem es HTML-Manipulation und -Interaktion in Node.js-Anwendungen ermöglicht.

Mit seiner Implementierung vieler robuster Web-Fähigkeiten ist JSDOM in Node.js ein nützliches Werkzeug für Entwickler, die in serverseitigen Umgebungen mit HTML- und XML-Dokumenten arbeiten. Die herausragenden Merkmale von JSDOM sind wie folgt:

W3C DOM Implementierung

JSDOM bietet eine umfassende JavaScript-Implementierung vieler der W3C DOM- und HTML-Spezifikationen. Dies ermöglicht Ihnen, bekannte DOM-APIs zu verwenden, um HTML- und XML-Dokumente programmatisch zu manipulieren.

Browser-ähnliche Umgebung

Da JSDOM eine Browserumgebung innerhalb von Node.js imitiert, können Sie HTML-Seiten genauso manipulieren, als wenn JavaScript in einem Browser ausgeführt würde. Dies umfasst das Arbeiten mit dem Dokumentobjektmodell, das Verwalten von Ereignissen, das Ausführen von Skripten und den Zugriff auf und die Änderung von Elementen.

Unterstützung für Standards

Moderne Webstandards, einschließlich HTML5, CSS3 und die neuesten JavaScript-Funktionen, werden unterstützt. Dies gewährleistet die Kompatibilität mit den meisten Webinhalten und ermöglicht eine genaue Manipulation und Analyse komplexer Seiten.

Parsing und Serialisierung

HTML-Strings können von JSDOM in DOM-Strukturen analysiert und DOM-Knoten zurück in HTML-Strings serialisiert werden. Dies dient dazu, Skripte innerhalb der Seite auszuführen und uns zu ermöglichen, aktualisierte HTML-Ausgaben von Webseiten zu bearbeiten und zu produzieren.

Anpassbare Konfiguration

JSDOM kann so konfiguriert werden, dass viele browserbezogene Funktionen nachgeahmt werden, einschließlich der Verarbeitung externer Ressourcen (wie das Laden externer Skripte und das Ausführen externer Skripte oder Stylesheets), dem Wechsel zwischen verschiedenen JavaScript-Engines (wie V8 oder SpiderMonkey) und mehr.

Integration mit Test-Frameworks

JSDOM ist ein beliebtes Werkzeug zum Schreiben von Unit-Tests und Integrationstests, einschließlich DOM-Manipulation in Test-Frameworks wie Jest und Mocha. Es ermöglicht das Testen von Web-Apps headless ohne eine komplette Browserumgebung zu benötigen.

Barrierefreiheit und Kompatibilität

Es ist geeignet für Anwendungen, die mit Barrierefreiheitsstandards konform sein müssen, da es über Barrierefreiheitseigenschaften wie Kompatibilität mit Bildschirmlesern und Unterstützung für ARIA-Eigenschaften verfügt.

Integration in das Node.js-Ökosystem

JSDOM funktioniert gut mit anderen Bibliotheken und dem größeren Node.js-Ökosystem. Es kann beispielsweise zusammen mit Paketen wie Puppeteer für komplexeres Web-Scraping und Automatisierungsaktivitäten oder mit Cheerio für effektives HTML-Parsing verwendet werden.

JSDOM Node.js erstellen und konfigurieren

Die folgenden Schritte können verwendet werden, um JSDOM in einer Node.js-Anwendung zu erstellen und zu konfigurieren:

JSDOM installieren

Stellen Sie zunächst sicher, dass npm und Node.js auf Ihrem Computer installiert sind. npm kann verwendet werden, um JSDOM zu installieren:

npm install jsdom
npm install jsdom
SHELL

Grundlegende JSDOM-Nutzung

Dies ist ein einfaches Beispiel für das Einrichten einer JSDOM-Umgebung und die Arbeit mit einem HTML-Dokument:

const { JSDOM } = require('jsdom');

// Example HTML content
const htmlContent = `
<!DOCTYPE html>
<html>
<head>
  <title>JSDOM Example</title>
</head>
<body>
  <div id="content">
    <p>Hello, JSDOM!</p>
  </div>
</body>
</html>
`;

// Create a JSDOM instance
const dom = new JSDOM(htmlContent);

// Access and manipulate the DOM
const document = dom.window.document;
const contentDiv = document.getElementById('content');
contentDiv.innerHTML = '<p>Hello, modified JSDOM!</p>';

// Serialize the modified DOM back to HTML
const modifiedHtml = dom.serialize();
console.log(modifiedHtml);
const { JSDOM } = require('jsdom');

// Example HTML content
const htmlContent = `
<!DOCTYPE html>
<html>
<head>
  <title>JSDOM Example</title>
</head>
<body>
  <div id="content">
    <p>Hello, JSDOM!</p>
  </div>
</body>
</html>
`;

// Create a JSDOM instance
const dom = new JSDOM(htmlContent);

// Access and manipulate the DOM
const document = dom.window.document;
const contentDiv = document.getElementById('content');
contentDiv.innerHTML = '<p>Hello, modified JSDOM!</p>';

// Serialize the modified DOM back to HTML
const modifiedHtml = dom.serialize();
console.log(modifiedHtml);
JAVASCRIPT

JSDOM NPM (Wie es für Entwickler funktioniert): Abbildung 2

Konfigurationsoptionen

Der JSDOM-Konstruktor akzeptiert Optionen, die Sie angeben können, um verschiedene Teile seiner Funktionalität anzupassen. Dies sind einige typische Setup-Optionen:

Es reguliert, wie Skripte und Stylesheets aus externen Ressourcen vom JSDOM-Objekt-API geladen werden sollen. Entscheiden Sie, ob die Skripte im geparsten HTML von JSDOM ausgeführt werden sollen. Ermöglicht es Skripten, die innerhalb von JSDOM ausgeführt werden, ihre Konsolenausgaben zu erfassen. Imitiert die visuelle Umgebung eines Browsers, was sich auf mehrere CSS- und Layout-Berechnungen auswirken könnte.

Dies ist ein Beispiel für das Einrichten von JSDOM-Code mit Optionen.

const { JSDOM } = require('jsdom');

const htmlContent = '<!DOCTYPE html><html><body><p>Hello, JSDOM!</p></body></html>';

const options = {
  resources: 'usable', // Load external resources (e.g., scripts, stylesheets)
  runScripts: 'dangerously', // Allow scripts to run
};

const dom = new JSDOM(htmlContent, options);

// Access the document and window objects
const document = dom.window.document;
const window = dom.window;

// Manipulate the DOM or interact with the window object here
console.log(document.documentElement.outerHTML); // Output the modified HTML
const { JSDOM } = require('jsdom');

const htmlContent = '<!DOCTYPE html><html><body><p>Hello, JSDOM!</p></body></html>';

const options = {
  resources: 'usable', // Load external resources (e.g., scripts, stylesheets)
  runScripts: 'dangerously', // Allow scripts to run
};

const dom = new JSDOM(htmlContent, options);

// Access the document and window objects
const document = dom.window.document;
const window = dom.window;

// Manipulate the DOM or interact with the window object here
console.log(document.documentElement.outerHTML); // Output the modified HTML
JAVASCRIPT

Erweiterte Nutzung

In komplexeren Situationen, wie das Verbinden von Testcode mit Test-Frameworks oder das Emulieren von Benutzerinteraktionen, kann JSDOM ebenfalls angewendet werden. Hier ist ein Beispiel, wie man JSDOM und Jest für Tests verwendet:

const { JSDOM } = require('jsdom');

test('modifying DOM with JSDOM', () => {
  const dom = new JSDOM('<!DOCTYPE html><html><body><p>Hello, JSDOM!</p></body></html>');
  const document = dom.window.document;
  const contentParagraph = document.querySelector('p');

  // Assert initial content
  expect(contentParagraph.textContent).toBe('Hello, JSDOM!');

  // Modify content
  contentParagraph.textContent = 'Hello, modified JSDOM!';

  // Assert modified content
  expect(contentParagraph.textContent).toBe('Hello, modified JSDOM!');
});
const { JSDOM } = require('jsdom');

test('modifying DOM with JSDOM', () => {
  const dom = new JSDOM('<!DOCTYPE html><html><body><p>Hello, JSDOM!</p></body></html>');
  const document = dom.window.document;
  const contentParagraph = document.querySelector('p');

  // Assert initial content
  expect(contentParagraph.textContent).toBe('Hello, JSDOM!');

  // Modify content
  contentParagraph.textContent = 'Hello, modified JSDOM!';

  // Assert modified content
  expect(contentParagraph.textContent).toBe('Hello, modified JSDOM!');
});
JAVASCRIPT

Einstieg

IronPDF und JSDOM in Node.js zum Laufen zu bringen, beinhaltet die Kombination dieser Bibliotheken, um HTML-Informationen in PDF-Dokumente zu konvertieren. JSDOM ermöglicht es Ihnen, mit HTML-Dokumenten programmatisch zu arbeiten, während IronPDF die Konvertierung von HTML in PDF erleichtert. Hier ist ein Leitfaden, um Ihnen den Einstieg zu erleichtern.

Was ist IronPDF für Node.js?

IronPDF für Node.js erzeugt PDF-Dokumente von überlegener Qualität aus HTML-Text. Während es die Integrität des ursprünglichen Webinhalts bewahrt, erleichtert es den Prozess der Umwandlung von HTML, CSS und JavaScript in vollständig formatierte PDFs. Webanwendungen, die dynamische, druckbare Dokumente wie Berichte, Rechnungen und Zertifikate erstellen müssen, können diese Funktion besonders nützlich finden.

Zu den vielen Funktionen, die IronPDF bietet, gehören anpassbare Seiteneinstellungen, Header, Footer und die Möglichkeit, Bilder und Schriftarten einzubetten. Um zu garantieren, dass die generierten PDFs dem beabsichtigten Design entsprechen, erlaubt es komplexe Layouts und Stile. Darüber hinaus verwaltet IronPDF die Ausführung von JavaScript innerhalb von HTML, was eine präzise Darstellung von dynamischem und interaktivem Material ermöglicht.

JSDOM NPM (Wie es für Entwickler funktioniert): Abbildung 3

Funktionen von IronPDF

PDF-Erstellung aus HTML

JavaScript, HTML und CSS in PDF konvertieren. Unterstützt Medienabfragen und Responsive Design, zwei moderne Webstandards. Nützlich zum dynamischen Dekorieren von PDF-Dokumenten, Berichten und Rechnungen mit HTML und CSS.

PDF-Bearbeitung

Bereits existierende PDFs können Text, Bilder und andere Inhalte hinzugefügt werden, oder alternativ können Sie Text und Bilder aus diesen PDF-Dateien entnehmen. Kombinieren Sie zahlreiche PDFs zu einer Datei. Teilen Sie PDF-Dateien in mehrere separate Dokumente. Fügen Sie Wasserzeichen, Anmerkungen, Kopf- und Fußzeilen ein.

Performance und Zuverlässigkeit

Hohe Leistung und Zuverlässigkeit sind erwünschte Designqualitäten in industriellen Umgebungen. IronPDF verwaltet große Dokumentensätze problemlos.

IronPDF installieren

Installieren Sie das IronPDF-Paket, um die Werkzeuge zu erhalten, die Sie benötigen, um mit PDFs in Node-Projekten zu arbeiten.

npm install @ironsoftware/ironpdf
npm install @ironsoftware/ironpdf
SHELL

HTML in PDF umwandeln mit JSDOM und IronPDF

Bereiten Sie das HTML-Material vor, um zu einem PDF umgewandelt zu werden. Als Beispiel:

<!-- example.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example Document</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .content {
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="content">
    <h1>Hello, JSDOM with IronPDF!</h1>
    <p>This is a sample HTML document converted to PDF using JSDOM and IronPDF.</p>
  </div>
</body>
</html>
<!-- example.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example Document</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .content {
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="content">
    <h1>Hello, JSDOM with IronPDF!</h1>
    <p>This is a sample HTML document converted to PDF using JSDOM and IronPDF.</p>
  </div>
</body>
</html>
HTML

Erstellen Sie ein Node.js-Skript namens convertToPdf.js, das den HTML-Inhalt mit JSDOM analysiert und ein PDF mit IronPDF erstellt.

const { JSDOM } = require('jsdom');
const IronPdf = require("@ironsoftware/ironpdf");
const fs = require('fs');

// Configure IronPDF with the license key (if applicable)
var config = IronPdf.IronPdfGlobalConfig;
config.setConfig({ licenseKey: '' });

// Load the HTML content from the file
const htmlContent = fs.readFileSync('example.html', 'utf8');

// Create a JSDOM instance and parse the HTML
const dom = new JSDOM(htmlContent);
const jdocument = dom.window.document;

// Convert the HTML to PDF
IronPdf.PdfDocument.fromHtml(jdocument.documentElement.outerHTML).then((pdfres) => {
  const filePath = `${Date.now()}.pdf`;
  pdfres.saveAs(filePath).then(() => {
    console.log('PDF saved successfully!');
  }).catch((e) => {
    console.log(e);
  });
});
const { JSDOM } = require('jsdom');
const IronPdf = require("@ironsoftware/ironpdf");
const fs = require('fs');

// Configure IronPDF with the license key (if applicable)
var config = IronPdf.IronPdfGlobalConfig;
config.setConfig({ licenseKey: '' });

// Load the HTML content from the file
const htmlContent = fs.readFileSync('example.html', 'utf8');

// Create a JSDOM instance and parse the HTML
const dom = new JSDOM(htmlContent);
const jdocument = dom.window.document;

// Convert the HTML to PDF
IronPdf.PdfDocument.fromHtml(jdocument.documentElement.outerHTML).then((pdfres) => {
  const filePath = `${Date.now()}.pdf`;
  pdfres.saveAs(filePath).then(() => {
    console.log('PDF saved successfully!');
  }).catch((e) => {
    console.log(e);
  });
});
JAVASCRIPT

JSDOM NPM (Wie es für Entwickler funktioniert): Abbildung 4

Laden Sie HTML-Inhalte aus einer Datenbank, Datei oder dynamisch erzeugtem Inhalt. Verwenden Sie IronPDF, um ein PDF-Dokument aus dem geparsten HTML-Inhalt zu erstellen. Der HTML-String wird von IronPDFs RenderHtmlAsPdf-Funktion akzeptiert, die dann ein Versprechen mit den PDF-Daten liefert. Mit dem Dateisystem-Modul (fs) von Node.js erstellt IronPDF das PDF-Dokument als Puffer (pdfBuffer), der in einer Datei gespeichert werden kann. Fehlerbehandlung gewährleistet die Belastbarkeit im Falle von Problemen wie beschädigtem HTML oder Netzwerkstörungen während der Erstellung von PDFs.

JSDOM NPM (Wie es für Entwickler funktioniert): Abbildung 5

Abschluss

Für die programmatische Erstellung von hochwertigen PDF-Dokumenten aus HTML-Informationen bietet JSDOM eine zuverlässige Option. Mit JSDOM können Entwickler mit DOM-Elementen interagieren und Informationen dynamisch bearbeiten, indem sie das Parsing und die Manipulation von HTML-Seiten in einer simulierten Browserumgebung erleichtert. Diese Funktion ist unerlässlich bei Aufgaben wie der Datenerfassung, der dynamischen Berichtserstellung und dem Web-Scraping.

Mit seinen leistungsstarken Fähigkeiten zum Umwandeln von HTML-Texten in PDFs, die Ihnen genaue Kontrolle über Layout, Paginierung, Header, Footer und andere PDF-spezifische Funktionen bieten, ist IronPDF eine großartige Ergänzung zu JSDOM. Es erleichtert die Umwandlung von komplexen HTML-Strukturen aus Node.js-Anwendungen direkt in druckbare, vorbereitete PDF-Dateien.

Die Kombination von JSDOM und IronPDF ermöglicht es Entwicklern, PDF-Dokumente aus HTML-Vorlagen oder dynamisch generierten Informationen automatisch zu erstellen. Dies macht die Dokumente nützlich für eine Vielzahl von Anwendungsfällen, wie das Erstellen von Berichten, Zertifikaten, Rechnungen und mehr. Diese Integration erfüllt effizient die einzigartigen Anforderungen von dokumentzentrierten Anwendungen innerhalb des Node.js-Ökosystems, indem die Stärken beider Bibliotheken genutzt werden, um die Produktivität zu steigern und die Dokumententreue zu bewahren.

IronPDF und Iron Software ermöglichen es Ihnen, die Fähigkeiten Ihres .NET-Entwicklungs-Toolkits mit OCR, Barcode-Scannen, PDF-Erstellung, Excel-Integration und anderen Funktionen zu erweitern. IronPDF combines Iron Software mit seiner Kernunterstützung, um Entwicklern zusätzliche Online-Apps und Funktionen sowie eine effizientere Entwicklung zu bieten, alles für nur $799 für die Basisedition.

Wenn Lizenzoptionen klar und auf das Projekt zugeschnitten sind, können Entwickler das optimale Modell mit größerer Leichtigkeit auswählen. Diese Merkmale helfen Entwicklern, eine Vielzahl von Problemen auf einfache, effektive und gut integrierte Weise zu lösen.

Darrius Serrant
Full-Stack-Software-Ingenieur (WebOps)

Darrius Serrant hat einen Bachelor-Abschluss in Informatik von der University of Miami und arbeitet als Full-Stack-WebOps-Marketing-Ingenieur bei Iron Software. Seit seiner Jugend vom Programmieren angezogen, sah er die Informatik als sowohl mysteriös als auch zugänglich, was es zum perfekten Medium für Kreativität und Problemlösung ...

Weiterlesen