NODE 說明

JsdomNPM（開發者的使用方法）

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

更新:2025年6月22日

當JSDOM和IronPDF結合在Node.js中使用時，程式設計師可以使用廣泛的工具集來創建和修改PDF文件。 JSDOM是一個純JavaScript實現的W3C DOM，允許在伺服器端操控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對於在伺服器端環境操作HTML和XML文件的開發者來說是一個有用的工具。 JSDOM的顯著特徵如下：

W3C DOM實現

JSDOM提供了對許多W3C DOM和HTML規範的全面JavaScript實現。這使您可以使用眾所周知的DOM API程式化操控HTML和XML文件。

類似瀏覽器的環境

因為JSDOM在Node.js中模擬了一個瀏覽器環境，您可以像在瀏覽器中執行JavaScript一樣操控HTML頁面。這包括與文件物件模型一起工作、管理事件、執行程式碼，以及訪問和更改項目。

標準支援

支持現代網絡標準，包括HTML5、CSS3和最新的JavaScript功能。這保證了與大多數網頁內容的相容性，並能夠準確地操控和解析複雜的頁面。

解析及序列化

JSDOM可以將HTML字串解析為DOM結構，並將DOM節點序列化回HTML字串。這是為了在頁面中執行程式碼並允許我們從網頁編輯和生成更新的HTML輸出。

可自定義的配置

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

與測試框架的集成

JSDOM是用於撰寫單元測試和整合測試的流行工具，包括在測試框架如Jest和Mocha中的DOM操作。它使得無需整個瀏覽器環境即可頭無瀏覽器執行測試網頁應用。

可訪問性和相容性

由於其具有可訪問性特徵，例如屏幕閱讀器相容性和對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控制應如何加載來自外部資源的程式碼和樣式表。決定解析的HTML中的程式碼是否應由JSDOM執行。允許在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變得更簡單。這裡有一個入門手冊。

什麼是IronPDF for Node.js？

IronPDF for Node.js 從HTML文字生成高品質的PDF文件。在保留原始網頁內容完整性的同時，它使得將HTML、CSS和JavaScript轉換為完全格式化的PDF變得更容易。需要生成動態、可打印文件如報告、發票和認證的網路應用程式可能會發現此工具特別有用。

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內容或動態生成內容。使用IronPDF從解析的HTML內容創建PDF文件。 IronPDF的 RenderHtmlAsPdf功能可接受HTML字符串，然後傳遞帶有PDF資料的Promise。使用Node.js的文件系統模組（pdfBuffer），可以儲存到文件中。在創建PDF時，錯誤處理保證了在發生問題（例如HTML損壞或網絡問題）的情況下的彈性。

JSDOM NPM （對開發者的運作方式）：圖5

結論

對於使用HTML資料程式化創建高品質的PDF文件，JSDOM提供了一個可靠的選項。借助JSDOM，開發人員可以在模擬瀏覽器環境中輕鬆解析和操控HTML頁面，與DOM元素互動並動態編輯資訊。此功能對於例如數據提取、動態報告生成和網路抓取等工作至關重要。

具有其堅實的能力將HTML文本轉換為PDF，您可以精確控制佈局、分頁、頁眉、頁腳和其他PDF特定功能，IronPDF是JSDOM的一個很好的補充。這使得可以將Node.js應用中的複雜HTML結構直接轉換為可打印的，準備好的PDF文件。

結合JSDOM和IronPDF可讓開發人員自動從HTML模板或動態生成的資訊創建PDF文件。這使得文件可用於各種用途，例如生成報告、證書、發票等。此整合通過利用兩個庫的優勢來提高生產力和保持文件的忠實度，從而有效滿足Node.js生態系統中以文件為中心的應用程式的獨特需求。

IronPDF和Iron Software使您能夠擴展您的.NET開發工具套件的功能，包括OCR、條碼掃描、PDF生成、Excel整合等功能。 IronPDF 結合Iron Software's 高度可配置的系統和套件與其核心支援，為開發人員提供額外的在線應用和功能，並通過僅為基礎版支付$799，提供更高效的開發。

當授權選項明確並量身定制項目時，開發人員可以更輕鬆地選擇最佳模式。這些功能支援開發人員以簡單、高效和良好整合的方式解決各種問題。