Przejdź do treści stopki
POMOC NODE

JsdomNPM (Jak działa dla deweloperów)

Po połączeniu JSDOM i IronPDF w Node.js programiści zyskują dostęp do rozbudowanego zestawu narzędzi do tworzenia i modyfikowania dokumentów PDF. Czysta implementacja W3C DOM w JavaScript, zwana JSDOM, umożliwia manipulowanie dokumentami HTML i XML po stronie serwera w sposób podobny do tego, jaki jest możliwy w przeglądarce. Z kolei IronPDF wykorzystuje proste interfejsy API Node.js, aby ułatwić tworzenie wysokiej jakości plików PDF na podstawie treści HTML.

Połączenie JSDOM i IronPDF pozwala programistom na łatwą konwersję stron internetowych do formatu PDF w ramach aplikacji Node.js, modyfikację istniejących plików PDF oraz tworzenie dokumentów PDF na bieżąco z szablonów HTML. To połączenie stanowi doskonałą opcję dla projektów wymagających zaawansowanych możliwości tworzenia plików PDF, ponieważ nie tylko zapewnia zgodność z nowoczesnymi technologiami internetowymi, ale także przyspiesza operacje generowania dokumentów.

Czym jest JSDOM NPM?

JSDOM NPM (Node Package Manager) to biblioteka JavaScript, która pozwala na użycie Node.js do analizowania i pracy z dokumentami HTML. Oferuje środowisko podobne do przeglądarki w ramach Node.js i obsługuje model W3C DOM (Document Object Model). W rezultacie można programowo manipulować właściwościami i treścią dokumentów HTML i XML. Można nawet symulować działania, takie jak kliknięcia i przesyłanie formularzy.

JSDOM NPM (Jak to działa dla programistów): Rysunek 1

JSDOM jest bardzo pomocny w takich czynnościach, jak tworzenie raportów opartych na HTML, testowanie i weryfikacja stron internetowych oraz web scraping. Jest to pomocne dla programistów podczas pracy ze stronami HTML w środowisku po stronie serwera, gdzie standardowe funkcje przeglądarki nie są dostępne. Pakiet JSDOM NPM wypełnia lukę między funkcjonalnością przeglądarki po stronie klienta a JavaScriptem po stronie serwera, obsługując manipulację kodem HTML i interakcję w aplikacjach Node.js.

Dzięki wdrożeniu wielu solidnych funkcji internetowych, JSDOM w Node.js jest użytecznym narzędziem dla programistów pracujących w środowiskach po stronie serwera z dokumentami HTML i XML. Najważniejsze cechy JSDOM są następujące:

Implementacja W3C DOM

JSDOM oferuje kompleksową implementację JavaScript wielu specyfikacji W3C DOM i HTML. Umożliwia to korzystanie ze znanych interfejsów API DOM do programowej manipulacji dokumentami HTML i XML.

Srodowisko podobne do przeglądarki

Ponieważ JSDOM naśladuje środowisko przeglądarki w ramach Node.js, można manipulować stronami HTML tak samo, jak gdyby JavaScript był wykonywany w przeglądarce. Obejmuje to pracę z modelem obiektowym dokumentu, zarządzanie zdarzeniami, wykonywanie skryptów oraz uzyskiwanie dostępu do elementów i ich modyfikowanie.

Obsługa standardów

Obsługiwane są nowoczesne standardy internetowe, w tym HTML5, CSS3 oraz najnowsze funkcje JavaScript. Gwarantuje to kompatybilność z większością treści internetowych i umożliwia dokładną obsługę oraz analizę złożonych stron.

Parsowanie i serializacja

Ciągi HTML mogą być analizowane przez JSDOM na struktury DOM, a węzły DOM mogą być ponownie serializowane na ciągi HTML. Ma to na celu umożliwienie wykonywania skryptów wewnątrz strony oraz edycję i generowanie zaktualizowanego kodu HTML ze stron internetowych.

Konfiguracja z możliwością dostosowania

JSDOM można skonfigurować tak, aby naśladował wiele funkcji związanych z przeglądarką, w tym przetwarzanie zasobów zewnętrznych (takich jak ładowanie zewnętrznych skryptów i wykonywanie zewnętrznych skryptów lub arkuszy stylów), przełączanie między różnymi silnikami JavaScript (takimi jak V8 lub SpiderMonkey) i wiele innych.

Integracja z frameworkami testowymi

JSDOM to popularne narzędzie do pisania testów jednostkowych i integracyjnych, w tym do manipulacji DOM w frameworkach testowych, takich jak Jest i Mocha. Umożliwia to testowanie aplikacji internetowych w trybie headless bez konieczności korzystania z pełnego środowiska przeglądarki.

Dostępność i kompatybilność

Nadaje się do aplikacji, które muszą spełniać standardy dostępności, ponieważ posiada funkcje ułatwiające dostęp, takie jak kompatybilność z czytnikami ekranu oraz obsługa właściwości ARIA.

Integracja z ekosystemem Node.js

JSDOM dobrze współpracuje z innymi bibliotekami oraz szerszym ekosystemem Node.js. Można go używać na przykład w połączeniu z pakietami takimi jak Puppeteer do bardziej złożonych zadań związanych z web scrapingiem i automatyzacją lub z Cheerio do efektywnego parsowania HTML.

Utwórz i skonfiguruj JSDOM Node.js

Poniższe kroki można wykorzystać do skompilowania i skonfigurowania JSDOM w aplikacji Node.js:

Zainstaluj JSDOM

Najpierw upewnij się, że npm i Node.js są zainstalowane na Twoim komputerze. Do zainstalowania JSDOM można użyć npm:

npm install jsdom
npm install jsdom
SHELL

Podstawowe zastosowanie JSDOM

Oto prosty przykład konfiguracji środowiska JSDOM i pracy z dokumentem HTML:

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 (Jak to działa dla programistów): Rysunek 2

Opcje konfiguracji

Konstruktor JSDOM akceptuje opcje, które można podać w celu dostosowania różnych części jego funkcjonalności. Oto kilka typowych opcji konfiguracyjnych:

Reguluje sposób, w jaki skrypty i arkusze stylów z zasobów zewnętrznych powinny być ładowane przez interfejs API obiektu JSDOM. Zdecyduj, czy skrypty w przeanalizowanym kodzie HTML powinny być wykonywane przez JSDOM. Umożliwia przechwytywanie danych wyjściowych konsoli skryptów uruchomionych w JSDOM. Naśladuje środowisko wizualne przeglądarki, co może mieć wpływ na niektóre obliczenia CSS i układu.

Oto przykład konfiguracji kodu JSDOM przy użyciu opcji.

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

Zaawansowane zastosowanie

W bardziej skomplikowanych sytuacjach, takich jak łączenie kodu testowego z frameworkami testowymi lub emulowanie interakcji użytkownika, można również zastosować JSDOM. Oto przykład wykorzystania JSDOM i Jest do testowania:

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

Pierwsze kroki

Uruchomienie IronPDF i JSDOM w Node.js wymaga połączenia tych bibliotek w celu konwersji informacji HTML na dokumenty PDF. JSDOM pozwala na pracę z dokumentami HTML za pomocą programowania, natomiast IronPDF ułatwia konwersję HTML do formatu PDF. Oto instrukcja, która pomoże Ci rozpocząć pracę.

Czym jest IronPDF for Node.js?

IronPDF for Node.js tworzy dokumenty PDF najwyższej jakości na podstawie tekstu HTML. Zachowując integralność oryginalnej treści internetowej, ułatwia proces konwersji HTML, CSS i JavaScript do w pełni sformatowanych plików PDF. Narzędzie to może okazać się szczególnie pomocne w przypadku aplikacji internetowych, które muszą generować dynamiczne, nadające się do druku dokumenty, takie jak raporty, faktury i certyfikaty.

Wśród wielu funkcji oferowanych przez IronPDF znajdują się regulowane ustawienia stron, nagłówki, stopki oraz możliwość osadzania obrazów i czcionek. Aby zagwarantować, że wygenerowane pliki PDF będą zgodne z zamierzonym projektem, umożliwia on stosowanie skomplikowanych układów i stylów. Ponadto IronPDF zarządza wykonywaniem kodu JavaScript w kodzie HTML, umożliwiając precyzyjne renderowanie materiałów dynamicznych i interaktywnych.

JSDOM NPM (Jak to działa dla programistów): Rysunek 3

Funkcje IronPDF

Generowanie plików PDF z HTML

Konwertuj JavaScript, HTML i CSS do formatu PDF. Obsługuje zapytania o media i responsywny projekt, dwa współczesne standardy internetowe. Przydatne do dynamicznego formatowania dokumentów PDF, raportów i rachunków przy użyciu HTML i CSS.

Edycja plików PDF

Do istniejących plików PDF można dodawać tekst, obrazy i inne treści lub, alternatywnie, można usuwać tekst i obrazy z tych plików PDF. Połącz wiele plików PDF w jeden plik. Podziel pliki PDF na wiele oddzielnych dokumentów. Należy uwzględnić znaki wodne, adnotacje, nagłówki i stopki.

Wydajność i niezawodność

Wysoka wydajność i niezawodność to cechy projektowe pożądane w środowiskach przemysłowych. IronPDF z łatwością zarządza dużymi zbiorami dokumentów.

Zainstaluj IronPDF

Zainstaluj pakiet IronPDF, aby uzyskać narzędzia potrzebne do pracy z plikami PDF w projektach Node.

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

Konwersja HTML do PDF przy użyciu JSDOM i IronPDF

Przygotuj materiał HTML do konwersji do formatu PDF. Przykładowo:


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

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

Stwórz skrypt Node.js o nazwie convertToPdf.js, który analizuje zawartość HTML przy użyciu JSDOM i tworzy plik PDF przy użyciu IronPDF.

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 (Jak to działa dla programistów): Rysunek 4

Wczytaj zawartość HTML z bazy danych, pliku lub treści tworzonej dynamicznie. Aby utworzyć dokument PDF na podstawie przeanalizowanej treści HTML, użyj IronPDF. Ciąg HTML jest akceptowany przez funkcję RenderHtmlAsPdf biblioteki IronPDF, która następnie zwraca obietnicę (Promise) zawierającą dane PDF. Korzystając z modułu systemu plików (fs) Node.js, IronPDF tworzy dokument PDF jako bufor (pdfBuffer), który można zapisać do pliku. Obsługa błędów gwarantuje odporność w przypadku problemów, takich jak uszkodzony kod HTML lub trudności z połączeniem sieciowym, podczas tworzenia plików PDF.

JSDOM NPM (Jak to działa dla programistów): Rysunek 5

Wnioski

JSDOM stanowi niezawodną opcję do programowego tworzenia wysokiej jakości dokumentów PDF na podstawie informacji HTML. Dzięki JSDOM programiści mogą wchodzić w interakcję z elementami DOM i dynamicznie edytować informacje, co ułatwia analizowanie i manipulowanie stronami HTML w symulowanym środowisku przeglądarki. Ta funkcja jest niezbędna w zadaniach takich jak ekstrakcja danych, dynamiczne generowanie raportów i web scraping.

Dzięki rozbudowanym możliwościom przekształcania tekstów HTML w pliki PDF, które zapewniają dokładną kontrolę nad układem, paginacją, nagłówkami, stopkami i innymi funkcjami charakterystycznymi dla plików PDF, IronPDF stanowi doskonałe uzupełnienie JSDOM. Ułatwia to konwersję skomplikowanych struktur HTML z aplikacji Node.js bezpośrednio do gotowych do druku plików PDF.

Połączenie JSDOM i IronPDF pozwala programistom na automatyczne tworzenie dokumentów PDF na podstawie szablonów HTML lub dynamicznie generowanych informacji. Dzięki temu dokumenty te mogą być przydatne w wielu różnych sytuacjach, takich jak tworzenie raportów, certyfikatów, faktur i nie tylko. Ta integracja skutecznie spełnia unikalne wymagania aplikacji zorientowanych na dokumenty w ekosystemie Node.js, wykorzystując mocne strony obu bibliotek w celu poprawy wydajności i zachowania wierności dokumentów.

IronPDF i Iron Software umożliwiają rozszerzenie możliwości zestawu narzędzi programistycznych .NET o funkcje OCR, skanowania kodów kreskowych, tworzenia plików PDF, integracji z Excelem oraz inne funkcje. IronPDF łączy wysoce konfigurowalne systemy i Suite Iron Software z podstawowym wsparciem, aby zapewnić programistom dodatkowe aplikacje i funkcje online, a także bardziej wydajne tworzenie oprogramowania, a wszystko to za jedyne $799 za wersję podstawową.

Gdy opcje licencji są jasne i dostosowane do projektu, programiści mogą z większą łatwością wybrać optymalny model. Funkcje te pomagają programistom w rozwiązywaniu szerokiego zakresu problemów w prosty, skuteczny i dobrze zintegrowany sposób.

Darrius Serrant
Full Stack Software Engineer (WebOps)

Darrius Serrant posiada tytuł licencjata z informatyki z Uniwersytetu Miami i pracuje jako Full Stack WebOps Marketing Engineer w Iron Software. Już od młodych lat zainteresował się kodowaniem, postrzegając informatykę jako zarówno tajemniczą, jak i dostępną, co czyni ją doskonałym medium dla kreatywności ...

Czytaj więcej

Zespol wsparcia Iron

Jestesmy online 24 godziny, 5 dni w tygodniu.
Czat
Email
Zadzwon do mnie