Message icon
フッターコンテンツにスキップ
  1. IronPDF for Node.js
  2. IronPDF for Node.js ブログ
  3. ノードヘルプ
  4. jsdom NPM
ノードヘルプ

JsdomNPM (開発者向けのしくみ)

Darrius Serrant
Darrius Serrant
更新日:

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ドキュメントを作成できます。 この組み合わせは、現代のWeb技術への準拠を保証するだけでなく、ドキュメント生成操作を加速するため、強力なPDF作成機能が必要なプロジェクトに最適なオプションです。

JSDOM NPMとは何ですか？

JSDOM NPM (Node Package Manager) is a JavaScriptライブラリで、Node.jsを使用してHTMLドキュメントを解析して操作できます。 Node.js内でブラウザのような環境を提供し、W3C DOM（ドキュメントオブジェクトモデル）をサポートします。 その結果、HTMLおよびXMLドキュメントの特性とコンテンツをプログラム上で操作できます。 クリックやフォーム送信などのアクションをシミュレートすることさえ可能です。

JSDOM NPM（開発者向け：図1）

JSDOMは、HTMLベースのレポートの作成、Webサイトのテストと検証、Webスクレイピングなどのアクティビティに非常に役立ちます。 標準的なブラウザ機能が利用できないサーバーサイド環境でHTMLページを操作する場合、開発者の助けになります。 JSDOM NPMパッケージは、Node.jsアプリケーション内でクライアントサイドのブラウザの機能とサーバーサイドJavaScriptの間のギャップを埋め、HTML操作とインタラクションを処理します。

多くの強力なWeb機能の実装を持つ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機能を含む最新のWeb標準に対応しています。 これにより、ほとんどのWebコンテンツと互換性が保証され、複雑なページを正確に操作および解析できます。

パースとシリアライゼーション

HTML文字列はJSDOMによってDOM構造に解析され、DOMノードは再びHTML文字列にシリアル化できます。 これにより、ページ内でスクリプトを実行でき、Webページから更新されたHTML出力を作成し編集できます。

カスタマイズ可能な設定

JSDOMは、外部リソースの処理（外部スクリプトのロードや外部スクリプトやスタイルシートの実行など）、異なるJavaScriptエンジン（V8やSpiderMonkeyなど）への切り替えなど、多くのブラウザ関連の機能を模倣するように設定できます。

テストフレームワークとの統合

JSDOMは、JestやMochaなどのテストフレームワークでDOM操作を含む単体テストや統合テストを書くための人気のあるツールです。 一連のブラウザ環境を必要とせずにWebアプリをヘッドレスでテストすることができます。

アクセシビリティと互換性

スクリーンリーダーとの互換性やARIAプロパティのサポートなどアクセシビリティ機能を備えているため、アクセシビリティ標準に準拠する必要のあるアプリケーションに適しています。

Node.jsエコシステムとの統合

JSDOMは他のライブラリやNode.jsエコシステム全体とうまく連携します。 例えば、Puppeteerを使用した高度なWebスクレイピングや自動化活動、あるいは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

開始方法

IronPDFとJSDOMをNode.jsで動作させるには、HTML情報をPDFドキュメントに変換するためにこれらのライブラリを組み合わせる必要があります。 JSDOMはHTMLドキュメントをプログラム的に操作できるようにし、IronPDFはHTMLをPDFに変換しやすくします。 以下は、始めるための手引きです。

IronPDF for Node.jsとは何ですか？

IronPDF for Node.jsはHTMLテキストから高品質のPDFドキュメントを生成します。 オリジナルのWebコンテンツの一貫性を保ちながら、HTML、CSS、JavaScriptを完全にフォーマットされたPDFに変換するプロセスを容易にします。 このツールは、レポート、請求書、証明書などの動的な印刷可能なドキュメントを生成する必要のあるWebアプリケーションに特に役立ちます。

IronPDFが提供するさまざまな機能には、調整可能なページ設定、ヘッダー、フッター、画像やフォントの埋め込みが含まれます。 生成されたPDFが目的のデザインに準拠することを保証するために、複雑なレイアウトやスタイルが許可されます。 さらに、IronPDFはHTML内でのJavaScriptの実行を管理し、動的でインタラクティブな素材の精確なレンダリングを可能にします。

JSDOM NPM（開発者向け：図3）

IronPDFの機能

HTMLからのPDF生成

JavaScript、HTML、CSSをPDFに変換します。 メディアクエリやレスポンシブデザインなどの現代Web標準に対応しています。 HTMLおよびCSSを使用してPDF文書、レポート、請求書を動的に装飾するのに便利です。

PDF編集

既存のPDFにテキスト、画像、その他のコンテンツを追加したり、あるいはこれらのPDFファイルからテキストや画像を取り出すことができます。 多数のPDFを1つのファイルに結合します。 PDFファイルを複数の個別の書類に分割します。 透かし、注釈、ヘッダー、フッターを含めます。

性能と信頼性

工業環境で高性能と信頼性が望まれる設計特性です。 IronPDFは大規模なドキュメントセットを簡単に管理します。

IronPDFをインストールする

IronPDFパッケージをインストールして、ノードプロジェクトで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

JSDOMを使用してHTMLコンテンツを解析し、IronPDFを使用してPDFを生成するconvertToPdf.jsというNode.jsスクリプトを作成します。

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を使用しています。 HTML文字列はIronPDFのRenderHtmlAsPdf関数によって受け取られ、PDFデータを持つPromiseが返されます。 Node.jsのファイルシステムモジュール（fs）を使用し、IronPDFはバッファー（pdfBuffer）としてPDFドキュメントを作成し、ファイルとして保存できます。 エラーハンドリングは、HTMLの破損やネットワークの難題などの問題が発生した場合の弾力性を保証します。

JSDOM NPM（開発者向け：図5）

結論

HTML情報から高品質のPDFドキュメントをプログラム的に作成するためにJSDOMは信頼できるオプションを提供します。 JSDOMを使用すると、開発者はDOM要素と対話し、HTMLページを模擬ブラウザー環境で解析操作しやすくすることで、情報を動的に編集できます。 この機能は、データ抽出、動的レポート生成、およびWebスクレイピングのような作業に不可欠です。

IronPDFは、そのレイアウト、ページ区切り、ヘッダー、フッター、およびその他のPDF特有の機能に対する正確な制御を可能にするHTMLテキストのPDFへの変換における堅固な能力を持っており、JSDOMへの素晴らしい追加機能です。 これにより、Node.jsアプリから直接複雑なHTML構造を印刷可能で準備されたPDFファイルに変換できます。

JSDOMとIronPDFの組み合わせにより、開発者はHTMLテンプレートや動的に生成された情報からPDFドキュメントを自動的に作成できます。 これにより、レポート、証明書、請求書などのさまざまな用途に文書を活用できます。 この統合は、両方のライブラリの長所を活用して生産性を向上させ、文書の完全性を保ちながら、Node.jsエコシステム内の文書中心のアプリケーションの特定の要件を効率的に満たします。

IronPDFおよびIron Softwareを使用することで、OCR、バーコードスキャン、PDF作成、Excel統合、その他の機能を備えた.NET開発ツールキットの機能を拡張できます。 IronPDF combines Iron Softwareの高度にカスタマイズ可能なシステムとスイートを中心に組み合わせて、開発者に追加のオンラインアプリと機能を提供し、より効率的な開発を可能にし、基本版にはわずか$799で提供されます。

ライセンスオプションが明確でプロジェクトに合わせて調整されているとき、開発者は最適なモデルをより簡単に選択できます。 これらの機能は、開発者が幅広い問題を簡潔で効果的で統合された方法で解決するのに役立ちます。

Darrius Serrant
Darrius Serrant
  今すぐエンジニアリングチームとチャット
フルスタックソフトウェアエンジニア（WebOps）

Darrius Serrantは、マイアミ大学でコンピュータサイエンスの学士号を取得し、Iron SoftwareでフルスタックWebOpsマーケティングエンジニアとして働いています。若い頃からコーディングに惹かれ、コンピューティングを神秘的かつアクセス可能なものとし、創造性と問題解決のための完璧な媒体と考えていました。

Iron Softwareでは、新しいものを創造することと、複雑なコンセプトをより理解しやすくすることを楽しんでいます。Resident Developerの一人として、次世代に専門知識を共有するために、学生を教えることにも志願しました。

Darriusにとって、その仕事は価値があり、実際の影響があるため、満足感があります。

関連する記事

30日間の無料体験 → 完全な製品。制限なし。クレジットカード不要。 無料トライアルを開始