管理者ダッシュボードのためのC#でのPDFへのワンクリックエクスポート

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

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

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

さらに深い問題は、JavaScriptでレンダリングされたチャートです。 Chart.js、ApexCharts、Highchartsは、HTMLの要素に非同期で描画するため、ネイティブの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は、ページがキャプチャされる前に実際に実行されるため、正しくレンダリングされます。

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

実際の使用方法

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();
});

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)

[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

実世界の利点

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

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

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

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

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

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

結び

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

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