節點幫助

JsdomNPM（它如何為開發者工作）

發佈 2024年10月24日

介紹

當 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 (節點套件管理器)是一个JavaScript允許您使用Node.js來解析和處理HTML文件的庫。它在Node.js內提供類似瀏覽器的環境，並支持W3C DOM(文件物件模型). 因此，您可以以程式化方式操控 HTML 和 XML 文件的特性和內容。您甚至可以模擬點擊和表單提交等行為。

JsdomNPM（它如何為開發人員工作）：圖 1

Jsdom 對於創建基於 HTML 的報告、測試和驗證線上網站以及網絡爬蟲等活動非常有幫助。在伺服器端環境中處理 HTML 頁面時，標準瀏覽器功能不可用，這能幫助開發者。 jsdom npm 套件透過處理 Node.js 應用程式中的 HTML 操作和互動，填補了用戶端瀏覽器功能和伺服器端 JavaScript 之間的差距。

Jsdom 在 Node.js 中實現了許多網頁強大的功能，是開發人員在伺服器端環境中處理 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 操作。這使得在不需要整個瀏覽器環境的情況下，無頭測試網路應用成為可能。

可及性與相容性

由於具備與螢幕閱讀器相容和支援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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install jsdom

VB C#

基本 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 instances
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 instances
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);

'INSTANT VB TODO TASK: The following line could not be converted:
const
If True Then
	JSDOM } = require( 'jsdom');
' Example HTML content
'INSTANT VB TODO TASK: The following line contains an assignment within expression that was not extracted by Instant VB:
'ORIGINAL LINE: const htmlContent = ` <!DOCTYPE html> <html> <head> <title> Jsdom Example</title> </head> <body> <div id="content"> <p> Hello, Jsdom!</p> </div> </body> </html> `;
const htmlContent = ` <(Not DOCTYPE) html> (Of html) (Of head) (Of title) Jsdom Example</title> </head> (Of body) <div id="content"> (Of p) Hello, Jsdom!</p> </div> </body> </html> `
' Create a Jsdom instances
const dom = New JSDOM(htmlContent)
' Access and manipulate the DOM
const document = dom.window.document
const contentDiv = document.getElementById( 'content');
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'contentDiv.innerHTML = '<p> Hello, modified Jsdom!</p>'; const modifiedHtml = dom.serialize(); console.log(modifiedHtml);

VB C#

JsdomNPM（開發人員如何使用）：圖 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

'INSTANT VB TODO TASK: The following line could not be converted:
const
If True Then
	JSDOM } = require( 'jsdom');
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'const htmlContent = '<!DOCTYPE html><html><body><p> Hello, Jsdom!</p></body></html>'; const options = { resources: 'usable', runScripts: 'dangerously'}; const dom = New JSDOM(htmlContent, options); const document = dom.window.document; const window = dom.window; console.log(document.documentElement.outerHTML); ' Output the modified HTML

VB C#

進階用法

在更複雜的情況下，例如將測試代碼與測試框架連接或模擬用戶互動時，也可以使用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!');
});

'INSTANT VB TODO TASK: The following line could not be converted:
const
If True Then
	JSDOM } = require( 'jsdom');
test( 'modifying DOM @with Jsdom', () =>
If True Then
	const dom = New JSDOM( '<!DOCTYPE html><html><body><p> Hello, Jsdom!</p></body></html>');
	const document = dom.window.document
	const contentParagraph = document.querySelector("p"c)
	expect(contentParagraph.textContent).toBe( 'Hello, Jsdom!');
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'	contentParagraph.textContent = 'Hello, modified Jsdom!'; expect(contentParagraph.textContent).toBe('Hello, modified Jsdom!'); });

VB C#

入門

在 Node.js 中使用 IronPDF 和 Jsdom 需要結合這些庫，以將 HTML 資訊轉換為 PDF 文件。 Jsdom 允許您使用程式碼操作 HTML 文件，而 IronPDF 則使將 HTML 轉換為 PDF 變得更容易。這是一份教你如何開始的手冊。

什麼是 IronPDF？

一個強大的庫稱為IronPDFfor Node.js旨在從HTML文本生成高品質的PDF文檔。在保持原始網頁內容完整性的同時，這使得將 HTML、CSS 和 JavaScript 轉換為具有完整格式的 PDF 的過程更為簡便。需要生成動態、可列印文件（如報告、發票、證書）的網頁應用程式可能會發現此工具特別有用。

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

JsdomNPM（對開發者如何運作）：圖 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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install @ironsoftware/ironpdf

VB C#

使用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>

<(Not -)- example.html -- > <(Not DOCTYPE) html> <html lang="en"> <meta charset="UTF-8"> (Of title) Example Document</title> ReadOnly Property body() As (Of style)(Of head)
	  font-family: Arial, sans-serif
End Property
	.content
	If True Then
	  margin:
	  20px
	End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'  </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>

VB C#

編寫一個名為convertToPdf.js的Node.js腳本，使用Jsdom解析HTML內容，並使用IronPDF創建PDF。

const { JSDOM } = require('jsdom');
const IronPdf = require("@ironsoftware/ironpdf");
const document=IronPdf.PdfDocument;
var config=IronPdf.IronPdfGlobalConfig
config.setConfig({licenseKey:''});
const fs = require('fs');
// Load the HTML content from 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;
document.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 document=IronPdf.PdfDocument;
var config=IronPdf.IronPdfGlobalConfig
config.setConfig({licenseKey:''});
const fs = require('fs');
// Load the HTML content from 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;
document.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);
     });
    });

'INSTANT VB TODO TASK: The following line could not be converted:
const
If True Then
	JSDOM } = require( 'jsdom');
const IronPdf = require("@ironsoftware/ironpdf")
const document=IronPdf.PdfDocument
Dim config=IronPdf.IronPdfGlobalConfig config.setConfig({licenseKey: ''});
const fs = require( 'fs');
' Load the HTML content from 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
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'document.fromHtml(jdocument.documentElement.outerHTML).@then((pdfres)=>
'{
'	const filePath = `$
'	{
'		@Date.now()
'	}
'	.pdf`;
'	pdfres.saveAs(filePath).@then(()=>

VB C#

JsdomNPM（它如何為開發者工作）：圖4

從資料庫、檔案或動態建立的內容載入 HTML 內容。要從解析後的 HTML 內容創建 PDF 文件，請使用 IronPDF。 HTML 字串被 IronPDF 接受。將HTML渲染為PDFfunction，然後傳遞一個帶有 PDF 數據的 Promise。使用文件系統模組(檔案系統)在 Node.js 中，IronPDF 將 PDF 文件創建為緩衝區。(pdfBuffer)可以儲存到檔案中。錯誤處理可確保在出現問題時的彈性，例如在創建 PDF 過程中遇到損壞的 HTML 或網路困難。

JsdomNPM（開發者如何使用）：圖 5

結論

為程式化地從 HTML 資訊創建高品質 PDF 文件，Jsdom 提供了一個可靠的選擇。使用 Jsdom，開發者可以在模擬瀏覽器環境中更輕鬆地解析和操作 HTML 頁面，與 DOM 元素互動並動態編輯信息。此功能對於資料提取、動態報告生成和網路擷取等工作至關重要。

IronPDF 擁有強大的功能，可以將 HTML 文本轉換成 PDF，讓您精確控制佈局、分頁、頁眉、頁腳及其他 PDF 特定功能，是 Jsdom 的絕佳補充。它使從 Node.js 應用程式直接將複雜的 HTML 結構轉換成可列印的已準備好的 PDF 文件變得更容易。

結合 Jsdom 和 IronPDF 允許開發人員自動從 HTML 範本或動態生成的信息創建 PDF 文件。這使文件在各種使用情境中都很有用，例如製作報告、證書、發票等。此整合通過利用兩個庫的優勢，在Node.js生態系統中高效滿足以文件為中心的應用程序的獨特需求，以提高生產力並維持文件的準確性。

IronPDF 和 Iron Software 讓您能夠擴展您的功能。 .NET 開發工具包，具有光學字符識別、條碼掃描、PDF 創建、Excel 集成及其他功能。 IronPDF結合IronSoftware 的高度可配置的系統和套件，其核心支援為開發者提供額外的線上應用程式和功能，以及更高效的開發，基本版僅售 $749。

當授權選項明確並針對專案量身定制時，開發人員可能更容易選擇最佳模型。這些功能幫助開發人員以簡單、有效和良好整合的方式解決各種問題。

< 上一頁
sockjs NPM（對開發者的運作方式）

下一個 >
Hashids NPM（它對開發人員的運作方式）