沒有找到您要找的內容嗎？
資訊圖標
跳至頁尾內容
  1. IronPDF
  2. IronPDF 部落格
  3. 使用IronPDF
  4. 一鍵將管理儀表板導出為PDF以C#實現
使用IRONPDF

如何在.NET Core中使用IronPDF建立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的輔助程式，不需要管理wkhtmltopdf二進位檔，也不需要支付和監控第三方匯出API。 IronPDF在您現有的ASP.NET應用程式中執行，作為C# NuGet庫用於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內容

控制器或服務層查詢使用者在螢幕上看到的相同資料，並填充一個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)
$vbLabelText   $csharpLabel

對於在計時器上而不是網路請求上初始化圖表的儀表板，用WaitFor.JavaScript()替換NetworkIdle0()，並在圖表的onComplete回調中信號準備就緒。 任何一種策略都能確保C# PDF程式庫在圖表完成繪製之後而不是之前捕捉圖表。

提示將CssMediaType設置為Print以應用您的@media print樣式表規則。 這讓您可以從匯出的PDF中隱藏側邊欄，導航欄和動作按鈕，而不修改現場儀表板的HTML。

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內執行JavaScript，Chart.js、ApexCharts和Highcharts的圖表在PDF中準確呈現，就像它們在螢幕上一樣—包括顏色、以靜態標籤呈現的工具提示和響應式大小。

品牌一致性。每份匯出的報告都具有在儀表板的樣式表中定義的公司標誌、配色方案和字體樣式。 在匯出和分發之間沒有重新格式化的步驟。

計劃生成。將呈現呼叫與後台工作搭配使用，自動將每週或每月的PDF發送給利益相關者。 領導層收到一份打磨過的報告，而無需任何人手動生成。

無外部依賴。IronPDF在進程中運行。 沒有需要保持活著的Puppeteer Node.js進程，沒有每個平台要捆綁的wkhtmltopdf二進位檔，也沒有每份文件的費率限制或價格的SaaS匯出API。

列印優化的佈局。在渲染時，CssMediaType.Print應用您的@media print規則，讓您用CSS定義一個乾淨的、特定於輸出的佈局，無需維護單獨的HTML範本。

結語

在管理儀表板中新增一個"匯出為PDF"按鈕聽起來像是一個小功能。 實際上，它消除了重複的手動任務，給予了非技術使用者他們多年前就開始繞過的能力，並生成了一份反映資料實際外觀的文件，而不是一份破碎的列印對話框近似。

IronPDF處理了呈現的複雜性——JavaScript執行，CSS媒體型別，圖表捕獲——因此您的實現只需要一個控制器動作和一個HTML範本。 如果您想在自己的儀表板上測試它，可以在ironpdf.com上獲得一個完整功能且無任何浮水印的30天免費試用。

常見問題

IronPDF在管理儀表板中的主要目的是什麼？

IronPDF允許使用者一鍵將動態管理儀表板導出為PDF，簡化了分享和保存儀表板資料的過程。

IronPDF如何改善管理儀表板的導出過程？

IronPDF通過將複雜且動態的儀表板內容直接轉換為PDF格式來提升導出過程，確保所有視覺元素和資料都得到精準保留。

IronPDF是否能處理導出到PDF時的動態內容？

是的，IronPDF設計用於高效處理動態內容，確保儀表板中的任何更新或更改都能準確反映在導出的PDF中。

是否可以使用IronPDF自訂PDF導出設置？

IronPDF提供各種PDF導出的自訂選項，允許使用者按照特定需求調整輸出，例如調整頁面大小、方向和邊距。

IronPDF支持哪種編程語言用於導出儀表板？

IronPDF支持C#將儀表板導出為PDF，這使它成為在.NET框架中工作的開發者的理想選擇。

IronPDF是否能在PDF中保持管理儀表板的佈局？

IronPDF確保管理儀表板的佈局在導出的PDF中得以保存，保持原始內容的完整性和外觀。

與其他方法相比，使用IronPDF導出儀表板有什麼好處？

IronPDF提供簡單的一鍵導出過程，保持高質量輸出，支持動態內容，且無縫整合C#，相比手動導出方法具有顯著優勢。

IronPDF能否將帶有互動元素的儀表板導出為PDF？

雖然IronPDF在導出靜態和動態內容方面表現出色，但互動元素如實時圖表可能需要額外處理來準確呈現在PDF格式中。

IronPDF適合企業級儀表板導出嗎？

是的，IronPDF非常適合企業級應用，提供強大的性能與可靠性，用於將複雜且資料豐富的儀表板導出為PDF。

將IronPDF整合到現有C#專案有多容易？

將IronPDF整合到現有C#專案中很簡單，得益於其完整的文件記載與支持，開發者可以迅速為應用程式新增PDF導出功能。

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

Curtis Chau擁有Carleton大學的電腦科學學士學位，專精於前端開發，擁有Node.js、TypeScript、JavaScript和React的專業知識。Curtis熱衷於建立直觀且美觀的使用者介面，喜愛使用現代框架並建立結構良好、視覺吸引力的手冊。

除了開發，Curtis對物聯網（IoT）有濃厚的興趣，探索創新的方法來整合硬體和軟體。在空閒時間，他喜歡玩遊戲和建立Discord機器人，結合他對技術的熱愛與創造力。

相關文章

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

Iron 支援團隊

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