節點幫助

JsdomNPM（開發者使用指南）

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

更新:6月 22, 2025

當 JSDOM 和 IronPDF 在 Node.js 中結合使用時，程式設計師可以使用一套功能強大的工具包來建立和修改 PDF 文件。 JSDOM 是 W3C DOM 的純 JavaScript 實現，它允許在伺服器端以類似於在瀏覽器中的方式操作 HTML 和 XML 文件。相反，IronPDF 使用簡單的 Node.js API，使從 HTML 內容創建高品質 PDF 變得更加容易。

JSDOM 和 IronPDF 的結合使開發人員能夠在 Node.js 應用程式中輕鬆地將網頁轉換為 PDF，更改預先存在的 PDF，並根據 HTML 範本動態建立 PDF 文件。對於需要強大的 PDF 創建功能的專案來說，這種組合是一個很好的選擇，因為它不僅確保符合現代網路技術，而且還能加快文件生成操作。

JSDOM NPM是什麼？

JSDOM NPM （Node 套件管理器）是一個JavaScript函式庫，它允許您使用 Node.js 解析和處理 HTML 文件。它在 Node.js 中提供了一個類似瀏覽器的環境，並支援 W3C DOM（文件物件模型）。因此，您可以以程式設計方式操作 HTML 和 XML 文件的特性和內容。你甚至可以模擬點擊和表單提交等操作。

! JSDOM NPM（開發者使用指南）：圖 1

JSDOM 對於建立基於 HTML 的報告、測試和驗證線上網站以及網頁抓取等活動非常有用。在伺服器端環境中處理 HTML 頁面時，由於標準瀏覽器功能不可用，它可以幫助開發人員。 JSDOM NPM 套件透過處理 Node.js 應用程式中的 HTML 操作和交互，彌合了客戶端瀏覽器功能和服務端 JavaScript 之間的差距。

Node.js 中的 JSDOM 實作了許多強大的 Web 功能，對於在伺服器端環境中處理 HTML 和 XML 文件的開發人員來說，它是一個有用的工具。 JSDOM 的主要特點如下：

W3C DOM 實現

JSDOM 提供了對 W3C DOM 和 HTML 規範的全面 JavaScript 實作。這樣，您就可以使用眾所周知的 DOM API 以程式設計方式操作 HTML 和 XML 文件。

類似瀏覽器的環境

由於 JSDOM 在 Node.js 中模擬了瀏覽器環境，因此您可以像在瀏覽器中執行 JavaScript 一樣操作 HTML 頁面。這包括使用文件物件模型、管理事件、執行腳本以及存取和更改項目。

支援標準

支援現代網路標準，包括 HTML5、CSS3 和最新的 JavaScript 功能。這保證了與大多數網路內容的兼容性，並使得準確操作和解析複雜頁面成為可能。

解析和序列化

HTML 字串可以被 JSDOM 解析成 DOM 結構，而 DOM 節點可以序列化回 HTML 字串。這樣就可以在頁面內執行腳本，並允許我們從網頁編輯和產生更新的 HTML 輸出。

可自訂配置

JSDOM 可以配置為模擬許多與瀏覽器相關的功能，包括處理外部資源（如加載外部腳本和執行外部腳本或樣式表）、在不同的 JavaScript 引擎（如 V8 或 SpiderMonkey）之間切換等等。

與測試框架集成

JSDOM 是一個流行的工具，用於編寫單元測試和整合測試，包括在 Jest 和 Mocha 等測試框架中進行 DOM 操作。這使得在無需完整瀏覽器環境的情況下測試 Web 應用程式成為可能。

可訪問性和相容性

它適用於需要符合無障礙標準的應用程序，因為它具有無障礙功能，例如與螢幕閱讀器相容以及支援 ARIA 屬性。

Node.js 生態系統集成

JSDOM 可以很好地與其他程式庫以及更廣泛的 Node.js 生態系統配合使用。例如，它可以與 Puppeteer 等軟體包結合使用，以進行更複雜的網頁抓取和自動化活動，或與 Cheerio 結合使用，以進行有效的 HTML 解析。

建立和配置 JSDOM Node.js

以下步驟可用於在Node.js應用程式中建置和配置JSDOM：

安裝 JSDOM

首先，請確保您的電腦上已安裝 npm 和 Node.js。可以使用 npm 安裝 JSDOM：

npm install jsdom

npm install jsdom

SHELL

JSDOM 基本用法

這是一個設定 JSDOM 環境並使用 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（開發者使用指南）：圖 2

設定選項

JSDOM 建構函數接受選項，您可以提供這些選項來自訂其功能的不同部分。以下是一些典型的設定選擇：

它規範了 JSDOM 物件 API 如何載入來自外部資源的腳本和樣式表。決定是否由 JSDOM 執行已解析 HTML 中的腳本。允許擷取在 JSDOM 中執行的腳本的控制台輸出。模擬瀏覽器的視覺環境，這可能會對一些 CSS 和佈局計算產生影響。

這是使用選項設定 JSDOM 程式碼的範例。

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

進階用法

在更複雜的情況下，例如將測試程式碼與測試框架連接或模擬使用者交互，也可以應用 JSDOM。以下舉例說明如何使用 JSDOM 和 Jest 進行測試：

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

開始

要在 Node.js 中使 IronPDF 和 JSDOM 正常運作，需要將這些庫結合起來，以便將 HTML 資訊轉換為 PDF 文件。 JSDOM 可讓您使用程式設計方式處理 HTML 文檔，而 IronPDF 則讓 HTML 到 PDF 的轉換更加容易。這裡提供一份入門指南。

什麼是適用於Node.js的IronPDF？

IronPDF for Node.js可以根據 HTML 文字產生高品質的 PDF 文件。在保持原始網頁內容完整性的同時，它使將 HTML、CSS 和 JavaScript 轉換為完全格式化的 PDF 的過程變得更加容易。對於需要產生動態、可列印文件（如報表、發票和憑證）的 Web 應用程式來說，此工具可能特別有用。

IronPDF 提供的眾多功能包括可調節的頁面設定、頁首、頁尾以及嵌入圖像和字體的功能。為了確保產生的 PDF 檔案符合預期設計，它允許使用複雜的佈局和樣式。此外，IronPDF 還管理 HTML 中 JavaScript 的執行，從而能夠精確渲染動態和互動式內容。

JSDOM NPM（開發者使用指南）：圖 3

IronPDF 的特點

從 HTML 產生 PDF

將 JavaScript、HTML 和 CSS 轉換為 PDF。支援媒體查詢和回應式設計這兩項當代網路標準。可用於使用 HTML 和 CSS 動態裝飾 PDF 文件、報告和帳單。

PDF編輯

可以將文字、圖像和其他內容添加到現有的 PDF 文件中，或者也可以從這些 PDF 文件中提取文字和圖片。將多個PDF文件合併成一個文件。將PDF文件拆分成多個單獨的文檔。包括水印、註解、頁首和頁尾。

效能與可靠性

在工業環境中，高效能和可靠度是理想的設計品質。 IronPDF 可以輕鬆管理大型文件集。

安裝 IronPDF

安裝 IronPDF 軟體包，即可取得在 node 專案中處理 PDF 所需的工具。

npm install @ironsoftware/ironpdf

npm install @ironsoftware/ironpdf

SHELL

使用 JSDOM 和 IronPDF 將 HTML 轉換為 PDF

準備好要轉換為 PDF 的 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>

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

建立一個名為convertToPdf.js的 Node.js 腳本，該腳本使用 JSDOM 解析 HTML 內容，並使用 IronPDF 建立 PDF。

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（開發者使用指南）：圖 4

從資料庫、檔案或動態建立的內容載入 HTML 內容。若要從解析後的 HTML 內容建立 PDF 文檔，請使用 IronPDF。 IronPDF 的RenderHtmlAsPdf函數接受 HTML 字串，然後傳回一個包含 PDF 資料的 Promise。 IronPDF 使用 Node.js 的檔案系統模組 ( fs ) 將 PDF 文件建立為緩衝區 ( pdfBuffer )，該緩衝區可以儲存到檔案中。錯誤處理機制保證了在建立 PDF 過程中出現問題（例如 HTML 損壞或網路故障）時的復原能力。

! JSDOM NPM（開發者使用指南）：圖 5

結論

對於透過程式設計方式從 HTML 資訊建立高品質 PDF 文檔，JSDOM 提供了一個可靠的選擇。透過 JSDOM，開發人員可以與 DOM 元素交互，並透過在模擬瀏覽器環境中更輕鬆地解析和操作 HTML 頁面來動態編輯資訊。此功能對於資料擷取、動態報表產生和網路爬蟲等工作至關重要。

IronPDF 具有強大的功能，可將 HTML 文字轉換為 PDF，並能精確控製版面配置、分頁、頁首、頁尾和其他 PDF 特有的功能，是 JSDOM 的絕佳補充。它可以更輕鬆地將 Node.js 應用程式中複雜的 HTML 結構直接轉換為可列印的 PDF 檔案。

JSDOM 和 IronPDF 的結合可讓開發人員根據 HTML 範本或動態產生的資訊自動建立 PDF 文件。這使得這些文件可用於各種用途，例如產生報告、證書、發票等等。此整合利用兩個函式庫的優勢，有效滿足了 Node.js 生態系統中以文件為中心的應用程式的獨特需求，從而提高了生產力並保持了文件的完整性。

IronPDF 和 Iron Software 可讓您透過 OCR、條碼掃描、PDF 建立、Excel 整合和其他功能擴展 .NET 開發工具包的功能。 IronPDF將Iron Software高度可配置的系統和套件與其核心支援相結合，為開發人員提供額外的線上應用程式和功能，以及更高效的開發，而基本版僅需$799 。

當授權選項清晰明確且符合專案需求時，開發人員可以更輕鬆地選擇最佳模式。這些功能可以幫助開發人員以直接、有效和整合的方式解決各種各樣的問題。