Puppet

ししあか


PuppeteerSharpを使用してHTMLをPDFに変換する手順と、カスタムCSSを注入する方法をご説明します。

  1. PuppeteerSharpの概要

PuppeteerSharpは、ヘッドレスChrome/Chromiumを制御するための.NET向けのオープンソースライブラリです。これを使用することで、ウェブページの操作、自動化、スクリーンショットの取得、PDFの生成などが可能になります。

  1. 環境のセットアップ

2.1. 必要なソフトウェアのインストール

.NET Core SDK（バージョン3.1以上）

Visual Studio または Visual Studio Code

2.2. 新しいプロジェクトの作成

コマンドラインから新しいコンソールアプリケーションを作成します。

dotnet new console -n PuppeteerPdfDemo
cd PuppeteerPdfDemo

2.3. PuppeteerSharpのインストール

NuGetパッケージとしてPuppeteerSharpをインストールします。

dotnet add package PuppeteerSharp

  1. HTMLをPDFに変換するコード

以下は、PuppeteerSharpを使用してローカルのHTMLファイルをPDFに変換する基本的なコードです。

using System;
using System.IO;
using System.Threading.Tasks;
using PuppeteerSharp;

namespace PuppeteerPdfDemo
{
    class Program
    {
        static async Task Main(string[] args)
        {
            // Chromiumのダウンロード
            await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultRevision);

            // ブラウザを起動
            using var browser = await Puppeteer.LaunchAsync(new LaunchOptions
            {
                Headless = true // ヘッドレスモードで実行
            });

            // 新しいページを開く
            using var page = await browser.NewPageAsync();

            // ローカルHTMLファイルのパス
            var htmlFilePath = Path.Combine(Directory.GetCurrentDirectory(), "input.html");

            // HTMLファイルを読み込む
            await page.GoToAsync($"file:///{htmlFilePath}");

            // PDFを生成
            await page.PdfAsync("output.pdf");

            Console.WriteLine("PDFの生成が完了しました。");
        }
    }
}

注意点:

Chromiumのダウンロード: 初回実行時にPuppeteerSharpは自動的にChromiumをダウンロードします。

HTMLファイルのパス: input.htmlは変換したいHTMLファイルです。プロジェクトの実行ディレクトリに配置してください。

  1. カスタムCSSを注入する方法

ページにカスタムCSSを適用するには、page.AddStyleTagAsyncメソッドを使用します。

4.1. カスタムCSSを用意する

例えば、custom.cssというファイルを作成し、以下の内容を記述します。

/* custom.css */
body {
    font-family: 'Arial', sans-serif;
    color: #333;
}

table, th, td {
    border: 1px solid #000 !important;
    border-collapse: collapse !important;
}

4.2. カスタムフォントの適用（必要な場合）

フォントを変更したい場合、ウェブフォントを使用するか、@font-faceを使用してカスタムフォントを定義します。

@font-face {
    font-family: 'CustomFont';
    src: url('fonts/CustomFont.woff2') format('woff2'),
         url('fonts/CustomFont.woff') format('woff'),
         url('fonts/CustomFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'CustomFont', sans-serif;
}

フォントファイルを適切なディレクトリ（例: fontsフォルダ）に配置し、パスを正しく指定してください。

4.3. コードにカスタムCSSの適用を追加

page.AddStyleTagAsyncを使用して、ページにカスタムCSSを追加します。

using System;
using System.IO;
using System.Threading.Tasks;
using PuppeteerSharp;

namespace PuppeteerPdfDemo
{
    class Program
    {
        static async Task Main(string[] args)
        {
            // Chromiumのダウンロード
            await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultRevision);

            // ブラウザを起動
            using var browser = await Puppeteer.LaunchAsync(new LaunchOptions
            {
                Headless = true
            });

            // 新しいページを開く
            using var page = await browser.NewPageAsync();

            // ローカルHTMLファイルのパス
            var htmlFilePath = Path.Combine(Directory.GetCurrentDirectory(), "input.html");

            // HTMLファイルを読み込む
            await page.GoToAsync($"file:///{htmlFilePath}");

            // カスタムCSSを読み込む
            var customCssPath = Path.Combine(Directory.GetCurrentDirectory(), "custom.css");
            await page.AddStyleTagAsync(new AddTagOptions
            {
                Path = customCssPath
            });

            // PDFオプションを設定（必要に応じて）
            var pdfOptions = new PdfOptions
            {
                Format = PaperFormat.A4,
                PrintBackground = true,
                MarginOptions = new MarginOptions
                {
                    Top = "20mm",
                    Bottom = "20mm",
                    Left = "15mm",
                    Right = "15mm"
                }
            };

            // PDFを生成
            await page.PdfAsync("output.pdf", pdfOptions);

            Console.WriteLine("PDFの生成が完了しました。");
        }
    }
}

ポイント:

カスタムCSSの適用: page.AddStyleTagAsyncメソッドでCSSファイルをページに注入します。

PDFオプションの設定: PdfOptionsを使用して、用紙サイズや余白などを指定できます。

PrintBackgroundの有効化: 背景色や背景画像をPDFに含めたい場合、PrintBackgroundをtrueに設定します。

  1. 追加のカスタマイズ

5.1. インラインでCSSを適用する

カスタムCSSをファイルではなくインラインで指定したい場合は、以下のようにします。

await page.AddStyleTagAsync(new AddTagOptions
{
    Content = "body { font-size: 14px; color: #333; }"
});

5.2. JavaScriptを注入する

必要に応じて、ページにJavaScriptを注入して操作することも可能です。

await page.EvaluateExpressionAsync(@"document.body.style.backgroundColor = '#f0f0f0';");

  1. 注意点とベストプラクティス

ローカルファイルの読み込み: file://プロトコルを使用してローカルHTMLファイルを読み込む際、相対パスに注意してください。

フォントの埋め込み: カスタムフォントを使用する場合、フォントファイルが正しく読み込まれるようパスを設定し、必要に応じてフォントのライセンスを確認してください。

エラーハンドリング: 実際のアプリケーションでは、try-catchブロックを使用してエラーを適切に処理してください。

パフォーマンス: 大量のPDFを生成する場合、ブラウザの起動と終了のオーバーヘッドを減らすために、ブラウザインスタンスを使い回すことを検討してください。

  1. 完全なコード例

以下に、上記の内容をまとめた完全なコードを示します。

using System;
using System.IO;
using System.Threading.Tasks;
using PuppeteerSharp;

namespace PuppeteerPdfDemo
{
    class Program
    {
        static async Task Main(string[] args)
        {
            // Chromiumのダウンロード
            await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultRevision);

            // ブラウザを起動
            using var browser = await Puppeteer.LaunchAsync(new LaunchOptions
            {
                Headless = true
            });

            // 新しいページを開く
            using var page = await browser.NewPageAsync();

            // ローカルHTMLファイルのパス
            var htmlFilePath = Path.Combine(Directory.GetCurrentDirectory(), "input.html");

            // HTMLファイルを読み込む
            await page.GoToAsync($"file:///{htmlFilePath}");

            // カスタムCSSを読み込む
            var customCssPath = Path.Combine(Directory.GetCurrentDirectory(), "custom.css");
            await page.AddStyleTagAsync(new AddTagOptions
            {
                Path = customCssPath
            });

            // PDFオプションを設定
            var pdfOptions = new PdfOptions
            {
                Format = PaperFormat.A4,
                PrintBackground = true,
                MarginOptions = new MarginOptions
                {
                    Top = "20mm",
                    Bottom = "20mm",
                    Left = "15mm",
                    Right = "15mm"
                }
            };

            // PDFを生成
            await page.PdfAsync("output.pdf", pdfOptions);

            Console.WriteLine("PDFの生成が完了しました。");

            // ブラウザを閉じる
            await browser.CloseAsync();
        }
    }
}

  1. まとめ

PuppeteerSharpを使用すると、HTMLからPDFへの変換時にカスタムCSSを注入してスタイルを調整することが容易に行えます。これにより、元のHTMLを編集せずにフォントやレイアウトの一貫性を保つことができます。

ご質問や不明な点があれば、お気軽にお知らせください。

いいなと思ったら応援しよう！