Puppeteerを使用してNode.jsでHTMLをPDFに変換する方法

現代のデジタル世界では、ウェブページやHTMLドキュメントをPDFファイルに変換する能力が重要です。 これは、レポートの生成、請求書の作成、またはより見栄えの良い形式で情報を共有するために役立ちます。 このブログ記事では、Googleが開発したオープンソースライブラリであるPuppeteerを使用して、Node.jsでHTMLページをPDFに変換する方法を探ります。

パペティアの紹介

Puppeteerは、主にGoogle ChromeまたはChromiumといったヘッドレスブラウザを制御し、ウェブスクレイピング、スクリーンショットの撮影、PDFの生成などのさまざまな操作を行うことができる強力なNode.jsライブラリです。 Puppeteerは、ブラウザと対話するための広範なAPIを提供しており、HTMLをPDFに変換するための優れた選択肢です。

なぜPuppeteerなのか？

• 使いやすさ: Puppeteer は、ヘッドレスブラウザの操作の複雑さを抽象化するシンプルで使いやすいAPIを提供します。
• 強力: Puppeteer は、ウェブページを操作し、ブラウザ要素と対話するための多岐にわたる機能を提供します。
• スケーラブル: Puppeteerを使用すると、複数のブラウザインスタンスを並列に実行することでPDF生成プロセスを簡単にスケールアップできます。

NodeJSプロジェクトの設定

始める前に、新しいNodeJSプロジェクトを設定する必要があります。 次の手順に従って開始してください:

1. まだNodeJSをインストールしていない場合(ダウンロードはNodeJSウェブサイト).

2. プロジェクト用の新しいフォルダーを作成し、Visual Studio Codeまたは特定のコードエディターで開きます。

3. 新しいプロジェクト用の package.json ファイルを作成するために、npm init を実行してください。 プロンプトに従い、必要な情報を入力してください。

   

4. npm install puppeteer を実行してPuppeteerをインストールします。

   

   プロジェクトのセットアップが完了したので、コードに取り掛かりましょう。

HTMLテンプレートを読み込み、PDFファイルに変換する

Puppeteerを使ってHTMLテンプレートをPDFファイルに変換するには、以下の手順に従ってください：

フォルダに「HTML To PDF.js」という名前のファイルを作成します。

Puppeteerとfsのインポート

    const puppeteer = require('puppeteer');
    const fs = require('fs');

    const puppeteer = require('puppeteer');
    const fs = require('fs');

コードは、まず2つの重要なライブラリをインポートすることから始まります。1つ目は、ChromeやChromiumなどのヘッドレスブラウザを制御するための多用途ツールであるpuppeteer、そして2つ目はファイルシステム操作を処理するための組み込みNodeJSモジュールであるfsです。 Puppeteerは、HTMLのレンダリング、スクリーンショットのキャプチャ、およびPDFファイルの生成を含む、幅広いウェブベースのタスクを自動化することを可能にします。

「exportWebsiteAsPdf関数の定義」

    async function exportWebsiteAsPdf(html, outputPath) {
      // Create a browser instance
      const browser = await puppeteer.launch({
        headless: 'new'
      });

      // Create a new page
      const page = await browser.newPage();

      await page.setContent(html, { waitUntil: 'domcontentloaded' });

      // To reflect CSS used for screens instead of print
      await page.emulateMediaType('screen');

      // Download the PDF
      const PDF = await page.pdf({
        path: outputPath,
        margin: { top: '100px', right: '50px', bottom: '100px', left: '50px' },
        printBackground: true,
        format: 'A4',
      });

      // Close the browser instance
      await browser.close();

      return PDF;
    }

    async function exportWebsiteAsPdf(html, outputPath) {
      // Create a browser instance
      const browser = await puppeteer.launch({
        headless: 'new'
      });

      // Create a new page
      const page = await browser.newPage();

      await page.setContent(html, { waitUntil: 'domcontentloaded' });

      // To reflect CSS used for screens instead of print
      await page.emulateMediaType('screen');

      // Download the PDF
      const PDF = await page.pdf({
        path: outputPath,
        margin: { top: '100px', right: '50px', bottom: '100px', left: '50px' },
        printBackground: true,
        format: 'A4',
      });

      // Close the browser instance
      await browser.close();

      return PDF;
    }

exportWebsiteAsPdf関数は、コードスニペットの中心的な役割を果たします。 この非同期関数は、入力パラメータとして html 文字列と outputPath を受け取り、PDFファイルを返します。この関数は以下のステップを実行する：

1. Puppeteerを使用して新しいヘッドレスブラウザーインスタンスを起動します。

2. 新しいブラウザページを作成します。

3. 指定された html 文字列をページコンテンツとして設定し、DOMコンテンツの読み込みを待ちます。 html`テンプレートをHTML文字列として読み込み、PDF形式に変換します。

4. 画面メディアタイプをエミュレートして、印刷専用のスタイルではなく、スクリーン用に使用されるCSSを適用します。

5. 読み込まれたHTMLコンテンツからPDFファイルを生成し、余白、背景印刷、およびフォーマットを指定します。(A4).

6. ブラウザーインスタンスを閉じます。

7. 生成されたPDFファイルを返します。

exportWebsiteAsPdf機能の使用

    // Usage example
    // Get HTML content from HTML file
    const html = fs.readFileSync('test.html', 'utf-8');

    exportWebsiteAsPdf(html, 'result.PDF').then(() => {
      console.log('PDF created successfully.');
    }).catch((error) => {
      console.error('Error creating PDF:', error);
    });

    // Usage example
    // Get HTML content from HTML file
    const html = fs.readFileSync('test.html', 'utf-8');

    exportWebsiteAsPdf(html, 'result.PDF').then(() => {
      console.log('PDF created successfully.');
    }).catch((error) => {
      console.error('Error creating PDF:', error);
    });

コードの最後のセクションでは、exportWebsiteAsPdf 関数の使用方法を示しています。 次の手順を実行します:

1. fsモジュールのreadFileSyncメソッドを使用してHTMLファイルからHTMLコンテンツを読み取ります。 ここでは、HTMLページからPDFを生成するためのテンプレートファイルを読み込んでいます。

2. HTML文字列と希望する出力パスを指定してexportWebsiteAsPdf関数を呼び出します。

3. .then ブロックを利用してPDF作成の成功を処理し、コンソールに成功メッセージをログ出力します。

4. HTMLからPDFへの変換プロセス中に発生するエラーを管理するために、.catchブロックを使用して、エラーメッセージをコンソールに記録します。

   このコードスニペットは、NodeJSとPuppeteerを使用してHTMLテンプレートをPDFファイルに変換する方法の包括的な例を提供します。 このソリューションを導入することで、さまざまなアプリケーションやユーザーのニーズに応じて、高品質のPDFを効率的に生成できます。

   

URLをPDFファイルに変換

HTMLテンプレートの変換に加えて、PuppeteerはURLを直接PDFファイルに変換することもできます。

Puppeteerのインポート

    const puppeteer = require('puppeteer');

    const puppeteer = require('puppeteer');

コードは、まずPuppeteerライブラリをインポートすることから始まります。これは、ChromeやChromiumのようなヘッドレスブラウザを制御するための強力なツールです。 Puppeteerは、HTMLコードのレンダリング、スクリーンショットのキャプチャ、そして私たちのケースではPDFファイルの生成など、さまざまなウェブベースのタスクを自動化することができます。

「exportWebsiteAsPdf関数の定義」

    async function exportWebsiteAsPdf(websiteUrl, outputPath) {
      // Create a browser instance
      const browser = await puppeteer.launch({
        headless: 'new'
      });

      // Create a new page
      const page = await browser.newPage();

      // Open URL in current page
      await page.goto(websiteUrl, { waitUntil: 'networkidle0' });

      // To reflect CSS used for screens instead of print
      await page.emulateMediaType('screen');

      // Download the PDF
      const PDF = await page.pdf({
        path: outputPath,
        margin: { top: '100px', right: '50px', bottom: '100px', left: '50px' },
        printBackground: true,
        format: 'A4',
      });

      // Close the browser instance
      await browser.close();

      return PDF;
    }

    async function exportWebsiteAsPdf(websiteUrl, outputPath) {
      // Create a browser instance
      const browser = await puppeteer.launch({
        headless: 'new'
      });

      // Create a new page
      const page = await browser.newPage();

      // Open URL in current page
      await page.goto(websiteUrl, { waitUntil: 'networkidle0' });

      // To reflect CSS used for screens instead of print
      await page.emulateMediaType('screen');

      // Download the PDF
      const PDF = await page.pdf({
        path: outputPath,
        margin: { top: '100px', right: '50px', bottom: '100px', left: '50px' },
        printBackground: true,
        format: 'A4',
      });

      // Close the browser instance
      await browser.close();

      return PDF;
    }

exportWebsiteAsPdf 関数は私たちのコードスニペットの中心です。 この非同期関数は、入力パラメータとして websiteUrl と outputPath を受け取り、PDFファイルを返します。この関数は以下のステップを実行します：

1. Puppeteerを使用して新しいヘッドレスブラウザーインスタンスを起動します。

2. 新しいブラウザページを作成します。

3. 提供された websiteUrl に移動し、waitUntil オプションを networkidle0 に設定してネットワークがアイドル状態になるまで待機します。

4. スクリーン用のCSSが印刷専用のスタイルの代わりに適用されるように、'screen'メディアタイプをエミュレートします。

5. 指定されたマージン、背景印刷、フォーマットで読み込んだウェブページをPDFファイルに変換します(A4).

6. ブラウザーインスタンスを閉じます。

7. 生成されたPDFファイルを返します。

exportWebsiteAsPdf機能の使用

    // Usage example
    exportWebsiteAsPdf('https://ironpdf.com/', 'result.pdf').then(() => {
      console.log('PDF created successfully.');
    }).catch((error) => {
      console.error('Error creating PDF:', error);
    });

    // Usage example
    exportWebsiteAsPdf('https://ironpdf.com/', 'result.pdf').then(() => {
      console.log('PDF created successfully.');
    }).catch((error) => {
      console.error('Error creating PDF:', error);
    });

コードの最終セクションでは、exportWebsiteAsPdf 関数の使用方法を示しています。 次の手順を実行します：

1. 目的の websiteUrl と outputPath を指定して exportWebsiteAsPdf 関数を呼び出す。

2. 成功したPDF作成を処理するために、thenブロックを使用します。 このブロック内では、成功メッセージをコンソールに記録します。

3. Web サイトから PDF への変換処理中に発生したエラーを処理するために catch ブロックを使用します。 エラーが発生した場合、コンソールにエラーメッセージを記録します。

   このコードスニペットをプロジェクトに統合することにより、Node.jsとPuppeteerを使用してURLを高品質なPDFファイルに簡単に変換することができます。

   

C#開発者に最適なHTMLからPDFへのライブラリ

IronPDFを探索するは、PDFファイルの生成、編集、内容抽出に使用される人気のある.NETライブラリです。 それは、HTML、テキスト、画像、および既存のPDF文書からPDFを作成するための簡単で効率的なソリューションを提供します。 IronPDFは、.NET Core、.NET Framework、および.NET 5.0+プロジェクトをサポートしており、さまざまなアプリケーションに対して多用途な選択肢となります。

IronPDFの主な機能

IronPDFによるHTMLからPDFへの変換:IronPDFはCSSを含むHTMLコンテンツをPDFファイルに変換します。 この機能を利用すると、ウェブページやHTMLテンプレートからピクセルパーフェクトのPDFドキュメントを作成できます。

URLレンダリング: IronPDF は URL を使用してサーバーから直接ウェブページを取得し、PDF ファイルに変換することができます。これにより、動的なウェブページからのコンテンツのアーカイブやレポートの作成が容易になります。

テキスト、画像、およびPDFのマージ: IronPDFを使用すると、テキスト、画像、既存のPDFファイルを1つのPDFドキュメントにマージできます。 この機能は、複数のコンテンツソースを使用して複雑なドキュメントを作成するのに特に便利です。

PDF編集: IronPDF は、ページの追加や削除、メタデータの修正、さらには PDF からテキストや画像を抽出するなど、既存の PDF ファイルを編集するためのツールを提供します。

結論

結論として、PDFファイルの生成および操作は多くのアプリケーションで一般的な要件であり、適切なツールを手元に持つことが重要です。 この記事で紹介されている、NodeJSと共にPuppeteerを使用したり、.NETと共にIronPDFを使用したりするようなソリューションは、HTMLコンテンツやURLをプロフェッショナルで高品質なPDFドキュメントに変換するための強力で効率的な方法を提供します。

IronPDF は特にその豊富な機能セットで際立っており、.NET 開発者にとって最適な選択肢となっています。 IronPDFは無料試用その機能を探求できるようにします。

ユーザーはIron Suiteパッケージは、以下を含む5つのプロフェッショナルな.NETライブラリのスイートです。IronXL, IronPDF, IronOCRその他。