信息圖標
跳過到頁腳內容
  1. IronPDF
  2. IronPDF部落格
  3. 使用IronPDF
  4. 以 C# 實作管理儀錶板的一鍵匯出 PDF 功能
使用IRONPDF

以 C# 實作管理儀錶板的一鍵匯出 PDF 功能

Curtis Chau
Curtis Chau
更新:

導出儀錶板的問題

IronPDF 首頁 內部儀表板的設計旨在透過網頁瀏覽器查看。 一旦有人需要與外部人員分享文件，例如董事會會議簡報、領導團隊的每週 KPI 快照或合規性審計報告，事情就會迅速惡化。

瀏覽器列印轉 PDF 是人們首先嘗試的方法，也是最先失敗的方法。 頁面會破壞圖表，導覽側邊欄會滲入佈局，產生的 PDF 與即時儀表板完全不同。 螢幕截圖的情況更糟：縮放到 A4 時解析度會降低，文字無法搜索，而且多部分 KPI 視圖很少能完整地顯示在一張圖片中而不丟失一半的資料。

更深層的問題在於 JavaScript 渲染的圖表。 由於 Chart.js、ApexCharts 和 Highcharts 都繪製在 HTML 上當非同步執行元素時，原生 HTML 到 PDF 快照通常會捕獲空白畫布。 HTML 內容已存在於 DOM 中，但視覺化效果尚未實現。 這時IronPDF就能派上用場了。

結果是，開發人員每週一都會收到一條訊息圖標，要求他們手動提取和格式化報告。 這不是一種可擴展的工作流程。 今天，我們將透過一個 IronPDF 範例來了解它如何從 HTML 內容建立 PDF 文件。

解決方案：使用 IronPDF 進行伺服器端儀表板渲染

IronPDF 將驅動儀表板的相同 HTML 渲染成像素級完美的 PDF 文件。 使用者點擊"匯出為 PDF"按鈕（可能標有藍色圓圈中的圖例或藍色圓圈中的圖例），API 端點處理 HTML 轉換邏輯，瀏覽器下載 PDF 內容。

無需部署 Puppeteer sidecar，無需管理 wkhtmltopdf 二進位文件，也無需付費和監控第三方匯出 API。 IronPDF 作為 C# NuGet 庫，可在您現有的ASP.NET 應用程式中執行，用於執行 PDF 任務。 它嵌入了一個 Chromium 引擎，可以像真正的瀏覽器一樣執行 JavaScript，這意味著 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();
});
JAVASCRIPT

帶有我們 JavaScript 程式碼的按鈕

！使用我們 JavaScript 程式碼的按鈕 無需重新載入頁面，無需重定向，只需從現有儀錶板視圖觸發文件下載即可。

2. 伺服器建立儀錶板 HTML 內容

控制器或服務層查詢使用者在螢幕上看到的相同數據，並使用 KPI 卡片、資料表和 Chart.js 或 ApexCharts 將執行的圖表配置 JSON 填充 HTML 模板（渲染的 Razor 視圖或建構的 HTML 字串）。

HTML可以引用您品牌的樣式表，包含 IronSoftware 標誌，或使用 Iron Software 的客戶標誌。 它還可以包含 @media print CSS 規則，以抑制導覽元素和控制分頁符號。

範例控制器文件

範例控制器文件

3. ChromePdfRenderer 在啟用 JavaScript 的情況下渲染 HTML 檔案或內容

這就是 IronPDF 處理最困難的部分。 EnableJavaScript = true 告訴渲染器在捕獲之前執行腳本。 WaitFor.NetworkIdle0() 會保存快照，直到所有非同步資源（包括透過 fetch 載入的圖表資料）都穩定下來。

透過 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)
$vbLabelText   $csharpLabel

對於圖表通過定時器而不是網路請求初始化的儀表板，請將 NetworkIdle0() 替換為 WaitFor.JavaScript()，並在圖表的 onComplete 回調中發出準備就緒的信號。 這兩種策略都能確保 C# PDF 庫在圖表繪製完成後捕獲圖表，而不是在圖表繪製完成之前捕獲。

[{t:(將 CssMediaType 設為 Print 以套用您的 @media 列印樣式表規則。 這樣，您就可以在不修改即時儀表板 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
$vbLabelText   $csharpLabel

Content-Disposition: attachment 由 File() 函數自動設定檔名，因此瀏覽器會觸發下載，而不是在新分頁中開啟 PDF 檔案。

下載的PDF文件

使用 IronPDF 範例程式碼產生 PDF 報告

5. 可選：定時報告分發

同一個渲染呼叫可以在後台作業、Hangfire 循環任務或託管的 IHostedService 中運行，每週一早上產生 KPI PDF 文件，並將其透過電子郵件發送給領導層。無需用戶互動。

實際效益

企業用戶可自助匯出報表。匯出按鈕上線後，"你能幫我匯出一份報告嗎？"之類的 Slack 訊息將不復存在。任何擁有控制面板存取權限的使用者無需提交請求即可自行下載 PDF 檔案。

圖表保真度。由於 Chromium 在 IronPDF、Chart.js、ApexCharts 和 Highcharts 中執行 JavaScript，因此圖表在 PDF 中的渲染效果與螢幕上的顯示效果完全一致——包括顏色、渲染為靜態標籤的工具提示以及響應式尺寸。

品牌一致性。所有匯出的報告都包含儀表板樣式表中定義的公司徽標、調色板和字體。 出口和分銷之間沒有格式轉換步驟。

定時生成。將渲染呼叫與後台作業結合使用，自動每週或每月向利害關係人發送 PDF 檔案。 領導層無需任何人手動生成即可收到一份精美的報告。

無外部依賴。 IronPDF在進程內運作。 沒有需要維護的 Puppeteer Node.js 進程，沒有需要按平台打包的 wkhtmltopdf 二進位文件，也沒有帶有速率限製或按文件定價的 SaaS 導出 API。

針對列印優化的佈局。 CssMediaType.Print會在渲染時套用您的 @media 列印規則，讓您無需維護單獨的 HTML 模板，即可在 CSS 中定義簡潔的、特定於匯出的佈局。

關閉

在管理後台新增"匯出為PDF"按鈕聽起來像是一個很小的功能。 實際上，它消除了重複的手動任務，使非技術用戶能夠獲得他們多年來一直在努力克服的功能，並生成反映數據實際外觀的文檔，而不是不完整的打印對話框近似值。

IronPDF 處理渲染的複雜性——JavaScript 執行、CSS 媒體類型、圖表擷取——因此，您這邊的實作就是一個控制器操作和一個 HTML 範本。 如果您想在自己的儀表板上進行測試， ironpdf.com提供30 天免費試用，包含所有功能且無浮水印。

Curtis Chau
Curtis Chau
  立即與工程團隊聊天
技術作家

Curtis Chau 擁有卡爾頓大學計算機科學學士學位，專注於前端開發，擅長於 Node.js、TypeScript、JavaScript 和 React。Curtis 熱衷於創建直觀且美觀的用戶界面，喜歡使用現代框架並打造結構良好、視覺吸引人的手冊。

除了開發之外，Curtis 對物聯網 (IoT) 有著濃厚的興趣，探索將硬體和軟體結合的創新方式。在閒暇時間，他喜愛遊戲並構建 Discord 機器人，結合科技與創意的樂趣。

相關文章

30天試用→完整產品。無限制。無需信用卡。 開始免費試用

鋼鐵支援團隊

我們每週 5 天，每天 24 小時在線上。
聊天
電子郵件
打電話給我