ダッシュボードのエクスポートの問題点

社内ダッシュボードは、ウェブブラウザで表示できるように構築されています。 しかし、取締役会のデッキ、リーダーシップチーム向けのKPIスナップショット、コンプライアンス監査報告書など、誰かが社外と共有する必要が生じた瞬間、事態は一気に悪化します。

ブラウザからPDFへの印刷は、人々が最初に試み、最初に失敗するものです。 ページが折れたり、チャートが切れたり、ナビゲーションのサイドバーがレイアウトに入り込んだり、出来上がったPDFは実際のダッシュボードとは似ても似つかないものになってしまいます。 スクリーンショットは、A4に拡大すると解像度が落ち、テキストは検索できず、複数セクションのKPIビューがデータの半分を失うことなく1枚の画像に収まることはほとんどありません。

さらに深い問題は、JavaScriptでレンダリングされたチャートです。 Chart.js、ApexCharts、およびHighchartsは非同期的にHTML<canvas>要素に描画するため、ネイティブHTMLからPDFへのスナップショットでは空のキャンバスをよくキャプチャします。 HTMLコンテンツはDOMにありますが、視覚化はありません。 そこでIronPDFがお役に立ちます。

その結果、開発者は毎週月曜日に、手動でレポートを作成し、フォーマットするよう求めるメッセージアイコンを受け取ることになります。 これはスケーラブルなワークフローではありません。 今日はIronPDFの例を見て、HTMLコンテンツからPDFドキュメントを作成する方法を説明します。

ソリューションIronPDFによるサーバーサイドダッシュボードのレンダリング

IronPDFはダッシュボードのHTMLをピクセルパーフェクトなPDFドキュメントにレンダリングします。 ユーザーは"Export to PDF"ボタンをクリックし（おそらく青い丸の中のキー、または丸の中の青いキーでマークされます）、APIエンドポイントがHTML変換ロジックを処理し、ブラウザがPDFコンテンツをダウンロードします。

Puppeteerのサイドカーをデプロイしたり、wkhtmltopdfバイナリを管理したり、サードパーティのエクスポートAPIを有料で監視したりする必要はありません。 IronPDFは既存のASP.NETアプリケーションの中でPDFタスクのためのC# NuGetライブラリとして動作します。 実際のブラウザと同じようにJavaScriptを実行するChromiumエンジンが組み込まれているため、Chart.jsとApexChartsは、ページがキャプチャされる前に実際に実行されるため、正しくレンダリングされます。

エクスポートボタンは、開発者をループに引き込むことなく、ビジネスユーザーであれば誰でも操作できるセルフサービス機能になります。

実際の使用方法

1.ユーザーは"PDFにエクスポート"をクリックします

ダッシュボードページ上の標準的なJavaScriptフェッチコールは、ユーザーのアクティブフィルタと日付範囲をAPIエンドポイントに送信し、PDFドキュメントの作成を支援します：

document.getElementById('export-btn').addEventListener('click', async () => {
    const params = new URLSearchParams({ from: dateFrom, to: dateTo, region: selectedRegion });
    const response = await fetch(`/api/reports/export?${params}`);
    const blob = await response.blob();
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'dashboard-report.pdf';
    a.click();
});

document.getElementById('export-btn').addEventListener('click', async () => {
    const params = new URLSearchParams({ from: dateFrom, to: dateTo, region: selectedRegion });
    const response = await fetch(`/api/reports/export?${params}`);
    const blob = await response.blob();
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'dashboard-report.pdf';
    a.click();
});

私たち for JavaScriptコードでボタンを

ページのリロードやリダイレクトはなく、既存のダッシュボードビューからファイルのダウンロードをトリガーするだけです。

2.サーバーはダッシュボードの HTML コンテンツを構築します

コントローラまたはサービス層は、ユーザーが画面上で見るのと同じデータを照会し、HTMLテンプレート（レンダリングされたRazorビューまたは構築されたHTML文字列）に、KPIカード、データテーブル、およびChart.jsまたはApexChartsが実行するチャート構成JSONを入力します。

HTMLは、ブランドのスタイルシートを参照したり、Iron Softwareのロゴを含めたり、Iron Softwareの顧客ロゴを使用したりできます。 また、ナビゲーション要素を抑制し、改ページを制御するための@media print CSSルールを含めることができます。

コントローラファイルの例

3.ChromePdfRendererはJavaScriptを有効にしてHTMLファイルまたはコンテンツをレンダリングします

そこでIronPdfが難しい部分を担当します。 EnableJavaScript = true は、キャプチャ前にスクリプトを実行するようにレンダラーに指示します。 WaitFor.NetworkIdle0()は、フェッチによってロードされたチャート・データを含むすべての非同期リソースが落ち着くまで、スナップショットを保持します。

C# PDF DLLでIronPDFをインストールしたら、以下のコードを使用してください：

using IronPdf;
using IronPdf.Rendering;

var renderer = new ChromePdfRenderer();

renderer.RenderingOptions.EnableJavaScript = true;

renderer.RenderingOptions.WaitFor.NetworkIdle0();

renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;

renderer.RenderingOptions.MarginTop = 15;

renderer.RenderingOptions.MarginBottom = 15;

var pdf = renderer.RenderHtmlAsPdf(dashboardHtml);

using IronPdf;
using IronPdf.Rendering;

var renderer = new ChromePdfRenderer();

renderer.RenderingOptions.EnableJavaScript = true;

renderer.RenderingOptions.WaitFor.NetworkIdle0();

renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;

renderer.RenderingOptions.MarginTop = 15;

renderer.RenderingOptions.MarginBottom = 15;

var pdf = renderer.RenderHtmlAsPdf(dashboardHtml);

Imports IronPdf
Imports IronPdf.Rendering

Dim renderer As New ChromePdfRenderer()

renderer.RenderingOptions.EnableJavaScript = True

renderer.RenderingOptions.WaitFor.NetworkIdle0()

renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print

renderer.RenderingOptions.MarginTop = 15

renderer.RenderingOptions.MarginBottom = 15

Dim pdf = renderer.RenderHtmlAsPdf(dashboardHtml)

Imports IronPdf
Imports IronPdf.Rendering

Dim renderer As New ChromePdfRenderer()

renderer.RenderingOptions.EnableJavaScript = True

renderer.RenderingOptions.WaitFor.NetworkIdle0()

renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print

renderer.RenderingOptions.MarginTop = 15

renderer.RenderingOptions.MarginBottom = 15

Dim pdf = renderer.RenderHtmlAsPdf(dashboardHtml)

チャートがネットワーク要求ではなくタイマーで初期化されるダッシュボードの場合、NetworkIdle0() を WaitFor.JavaScript() と交換し、チャートの onComplete コールバック内から準備完了を通知してください。 いずれの戦略でも、C# PDF ライブラリは、描画前ではなく、描画終了後にチャートを確実にキャプチャします。

[tt:(@mediaプリントスタイルシートルールを適用するには、CssMediaTypeをPrintに設定してください。 これにより、ダッシュボードのHTMLを変更することなく、エクスポートされたPDFからサイドバー、ナビゲーションバー、アクションボタンを隠すことができます。］

4. コントローラーがPDFドキュメントをファイルダウンロードとして返す

このAPIエンドポイントは、PDFコンテンツをFileContentResultでラップします。 PDF協会会員であれ、AWSパートナーネットワークのユーザーであれ、提供はシームレスです：

[HttpGet("api/reports/export")]

public IActionResult ExportDashboard([FromQuery] ReportFilters filters)

{

    var dashboardHtml = _reportService.BuildDashboardHtml(filters);

    var renderer = new ChromePdfRenderer();

    renderer.RenderingOptions.EnableJavaScript = true;

    renderer.RenderingOptions.WaitFor.NetworkIdle0();

    renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

    PdfDocument report = renderer.RenderHtmlAsPdf(dashboardHtml);

    return File(

        report.BinaryData,

        "application/pdf",

        $"KPI-Report-{filters.From:yyyyMMdd}.pdf"

    );

}

[HttpGet("api/reports/export")]

public IActionResult ExportDashboard([FromQuery] ReportFilters filters)

{

    var dashboardHtml = _reportService.BuildDashboardHtml(filters);

    var renderer = new ChromePdfRenderer();

    renderer.RenderingOptions.EnableJavaScript = true;

    renderer.RenderingOptions.WaitFor.NetworkIdle0();

    renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

    PdfDocument report = renderer.RenderHtmlAsPdf(dashboardHtml);

    return File(

        report.BinaryData,

        "application/pdf",

        $"KPI-Report-{filters.From:yyyyMMdd}.pdf"

    );

}

Imports Microsoft.AspNetCore.Mvc
Imports IronPdf

<HttpGet("api/reports/export")>
Public Function ExportDashboard(<FromQuery> filters As ReportFilters) As IActionResult

    Dim dashboardHtml = _reportService.BuildDashboardHtml(filters)

    Dim renderer = New ChromePdfRenderer()

    renderer.RenderingOptions.EnableJavaScript = True

    renderer.RenderingOptions.WaitFor.NetworkIdle0()

    renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print

    Dim report As PdfDocument = renderer.RenderHtmlAsPdf(dashboardHtml)

    Return File(report.BinaryData, "application/pdf", $"KPI-Report-{filters.From:yyyyMMdd}.pdf")

End Function

Imports Microsoft.AspNetCore.Mvc
Imports IronPdf

<HttpGet("api/reports/export")>
Public Function ExportDashboard(<FromQuery> filters As ReportFilters) As IActionResult

    Dim dashboardHtml = _reportService.BuildDashboardHtml(filters)

    Dim renderer = New ChromePdfRenderer()

    renderer.RenderingOptions.EnableJavaScript = True

    renderer.RenderingOptions.WaitFor.NetworkIdle0()

    renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print

    Dim report As PdfDocument = renderer.RenderHtmlAsPdf(dashboardHtml)

    Return File(report.BinaryData, "application/pdf", $"KPI-Report-{filters.From:yyyyMMdd}.pdf")

End Function

Content-Disposition: attachment は File() によってファイル名と共に自動的に設定されるため、ブラウザは PDF を新しいタブで開くのではなく、ダウンロードを開始します。

ダウンロードしたPDFファイル

5. オプション：レポートの定期配信

同じレンダリング処理は、バックグラウンドジョブ、Hangfireの定期タスク、またはホストされたIHostedService内で実行可能です。これにより、毎週月曜日の朝に週次KPIのPDFが生成され、経営陣の配布リストにメールで送信されます。ユーザーによる操作は一切不要です。

実世界の利点

**ビジネスユーザー向けのセルフサービス機能。**エクスポートボタンが有効になると、"レポートを作成してもらえますか？"といったSlackメッセージはなくなります。ダッシュボードへのアクセス権を持つユーザーなら誰でも、リクエストを送ることなく、自分でPDFをダウンロードできます。

**チャートの忠実度。**ChromiumがIronPDF内部でJavaScriptを実行するため、Chart.js、ApexCharts、Highchartsのチャートは、色、静的ラベルとして表示されるツールチップ、レスポンシブなサイズ変更など、画面上に表示されるのと同じ状態でPDFに正確にレンダリングされます。

**ブランドの一貫性。**エクスポートされるすべてのレポートには、ダッシュボードのスタイルシートで定義された会社のロゴ、カラーパレット、およびタイポグラフィが反映されます。 エクスポートと配布の間に、書式変更の工程はありません。

**スケジュールされた生成。**レンダリング呼び出しをバックグラウンドジョブと連携させ、PDFファイルを毎週または毎月、関係者に自動的にメールで送信します。 手作業で作成することなく、経営陣は洗練されたレポートを受け取ることができます。

**外部依存関係はありません。**IronPDFはインプロセスで動作します。 Puppeteer for Node.jsプロセスを維持する必要も、プラットフォームごとにwkhtmltopdfバイナリをバンドルする必要も、レート制限やドキュメントごとの課金があるSaaSエクスポートAPIも存在しません。

**印刷用に最適化されたレイアウト。**CssMediaType.PRINTは、レンダリング時に@media PRINTルールを適用するため、個別のHTMLテンプレートを用意することなく、CSSでエクスポート専用のすっきりとしたレイアウトを定義できます。

結び

管理ダッシュボードに"PDFにエクスポート"ボタンを追加するのは、些細な機能のように思えるかもしれません。 具体的には、反復的な手作業を排除し、技術的知識のないユーザーに長年回避策に頼っていた機能を提供するとともに、不完全な印刷ダイアログによる近似値ではなく、データが実際にどのように表示されるかを反映したドキュメントを生成します。

IronPDFは、JavaScriptの実行、CSSメディアタイプ、チャートのキャプチャといったレンダリングの複雑な処理を処理するため、実装側はコントローラーアクションとHTMLテンプレートだけで済みます。 ご自身のダッシュボードで試してみたい場合は、ironpdf.comにて、全機能を利用でき、透かしも表示されない30日間トライアルをご利用いただけます。