NODE 說明

JsdomNPM（開發者的使用方法）

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

更新:2025年6月22日

當 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 適用於 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 素材。舉例來說：


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

建立一個名為 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高度可配置的系統和Suite與其核心支援相結合，為開發人員提供額外的線上應用程式和功能，以及更有效率的開發，而基本版僅需 $999。

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