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. npm init を実行して、プロジェクト用の新しい package.json ファイルを作成します。 プロンプトに従い、必要な情報を入力してください。

   

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つの重要なライブラリをインポートすることから始まります：puppeteer、ChromeやChromiumのようなヘッドレスブラウザを制御するための多用途なツール、およびファイルシステム操作を処理するための組み込み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. HTMLファイルからHTMLコンテンツを読み込むには、fsモジュールのreadFileSyncメソッドを使用します。 ここでは、HTMLページからPDFを生成するためのテンプレートファイルを読み込んでいます。

2. 読み込まれたhtml文字列と希望するoutputPathを使用して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. 指定の余白、背景印刷、およびフォーマット（A4）で読み込んだウェブページをPDFファイルに変換します。

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. exportWebsiteAsPdf 関数を、希望するwebsiteUrl と outputPath で呼び出してください。

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

3. ウェブサイトから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ファイルを単一のPDFドキュメントにマージできます。 この機能は、複数のコンテンツソースを使用して複雑なドキュメントを作成するのに特に便利です。

PDF操作：IronPDFは、既存のPDFファイルを編集するためのツールを提供します。例えば、ページの追加や削除、メタデータの変更、さらにはPDF文書からのテキストや画像の抽出などが可能です。

結論

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

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

ユーザーは、Iron Suiteパッケージからも恩恵を受けることができます。これは、IronXL、IronPDF、IronOCRなど、5つのプロフェッショナルな.NETライブラリを含むスイートです。