节点帮助

JsdomNPM（如何为开发人员工作）

发布 2024年十月24日

介绍

当 Jsdom 和 IronPDF 在 Node.js 中结合使用时，程序员就可以使用广泛的工具包来创建和修改 PDF 文档。 W3C DOM 的纯 JavaScript 实现（称为 Jsdom）使得在服务器端操作 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 之间架起了一座桥梁。

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 功能在内的现代网络标准。这就保证了与大多数网页内容的兼容性，并使准确操作和解析复杂网页成为可能。

解析和序列化

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 应如何加载来自外部资源的脚本和样式表。决定解析后的 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

'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？

一个名为IronPDFNode.js for 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 软件包，获得在节点项目中处理 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

准备好 HTML 材料，以便转换成 PDF。举例说明

<!-- 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。 IronPDF 可接受 HTML 字符串将Html渲染为Pdf在翻译过程中，翻译人员必须使用 "Promise "功能，然后将 PDF 数据与 "Promise "一起交付。使用文件系统模块(fs)在 IronPDF for 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开发工具包具有OCR、条形码扫描、PDF创建、Excel集成等功能。 IronPDF组合IronSoftware 的高度可配置的系统和套件及其核心支持可为开发人员提供更多的在线应用程序和功能，以及更高效的开发，而基础版仅售 749 美元。

如果许可证选项清晰明了，并针对项目量身定制，开发人员就可以更轻松地选择最佳模式。这些功能可以帮助开发人员以直接、有效和集成度高的方式解决各种问题。

< 前一页
sockjs NPM（如何为开发人员工作）

下一步 >
Hashids NPM（如何为开发人员工作）