Eksport do formatu PDF jednym kliknięciem w języku C# dla pulpitów administracyjnych

Problem związany z eksportowaniem pulpitów nawigacyjnych

Wewnętrzne pulpity nawigacyjne są tworzone do wyświetlania w przeglądarce internetowej. W momencie, gdy ktoś chce udostępnić go poza nią: na prezentację na spotkaniu zarządu, cotygodniowy zrzut stanu KPI dla zespołu kierowniczego lub raport z audytu zgodności, to sprawy szybko się komplikują.

Drukowanie do PDF w przeglądarce to pierwsza rzecz, którą ludzie próbują i pierwsza, która zawodzi. Strony łamią się i przecinają wykresy, paski boczne nawigacji przeciekają do układu, a otrzymany PDF wygląda zupełnie inaczej niż żywy pulpit nawigacyjny. Zrzuty ekranu są gorsze: rozdzielczość pogarsza się po skali do A4, tekst nie jest wyszukiwalny, a wielosekcyjny widok KPI rzadko mieści się w jednym obrazie bez utraty połowy danych.

Głębszym problemem są wykresy renderowane w JavaScript. Ponieważ Chart.js, ApexCharts i Highcharts rysują do elementu HTML asynchronicznie, natywne zrzuty HTML do PDF często uchwycają pustą płaszczyznę. Zawartość HTML znajduje się w DOM, ale wizualizacja nie. Tutaj IronPDF może pomóc.

Wynikiem jest, że programista otrzymuje ikonę wiadomości w każdy poniedziałek, proszącą o ręczne pobranie i sformatowanie raportu. To nie jest skalowalny przepływ pracy. Dzisiaj przyjrzymy się przykładzie użycia IronPDF, aby zobaczyć, jak można tworzyć dokumenty PDF z zawartości HTML.

Rozwiązanie: Renderowanie pulpitu nawigacyjnego po stronie serwera za pomocą IronPDF

IronPDF renderuje ten sam HTML, który zasila twój pulpit nawigacyjny, do idealnie odwzorowanego dokumentu PDF. Użytkownik klika przycisk "Eksportuj do PDF" (może oznaczony kluczem w niebieskim kółku lub niebieskim kluczem w kółku), punkt końcowy API obsługuje logikę konwersji HTML, a przeglądarka pobiera treść PDF.

Nie ma potrzeby wdrażania Puppeteer ani zarządzania plikiem binarnym wkhtmltopdf, ani płacenia za eksport API od dostawców trzecich i ich monitorowania. IronPDF działa wewnątrz istniejącej aplikacji ASP.NET jako C# NuGet biblioteka do zadań PDF. Zawiera silnik Chromium, który wykonuje JavaScript w taki sam sposób, jak robi to rzeczywista przeglądarka, co oznacza, że Chart.js i ApexCharts renderują się poprawnie, ponieważ faktycznie działają, zanim strona zostanie uchwycona.

Przycisk eksportu staje się funkcją samoobsługową, którą każdy użytkownik biznesowy może obsługiwać, bez wciągania programisty w pętlę.

Jak to działa w praktyce

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

Korzystne efekty w prawdziwym świecie

Samoobsługa dla użytkowników biznesowych. Gdy przycisk eksportu jest gotowy, wiadomości na Slack w stylu "czy możesz pobrać dla mnie raport?" przestają przychodzić. Każdy użytkownik z dostępem do pulpitu nawigacyjnego może pobrać swój własny PDF bez składania prośby.

Fidelity wykresów. Ponieważ Chromium wykonuje JavaScript wewnątrz IronPDF, wykresy Chart.js, ApexCharts i Highcharts renderują się w PDF dokładnie tak, jak wyglądają na ekranie — w tym kolory, podpowiedzi renderowane jako statyczne etykiety i responsywne rozmiary.

Spójność marki. Każdy wyeksportowany raport ma logo firmy, paletę kolorów i typografię zdefiniowaną w arkuszu stylów pulpitu nawigacyjnego. Nie ma potrzeby ponownego formatowania między eksportem a dystrybucją.

Generowanie planowane. Połącz metodę renderowania z zadaniem w tle, aby automatycznie wysyłać co tydzień lub co miesiąc raporty PDF do interesariuszy. Kadra kierownicza otrzymuje dopracowany raport bez ręcznego generowania go przez kogokolwiek.

Brak zewnętrznych zależności. IronPDF działa w procesie. Nie ma potrzeby utrzymywania procesu Node.js Puppeteer, nie trzeba dołączać binarium wkhtmltopdf dla każdej platformy, ani korzystać z SaaS API eksportu z limitami szybkości lub ceną za dokument.

Optymalizacja układu do druku. CssMediaType.Print stosuje zasady @media print w czasie renderowania, pozwalając zdefiniować czysty, specyficzny dla eksportu układ w CSS bez konieczności utrzymywania oddzielnego szablonu HTML.

Zakończenie

Dodanie przycisku "Eksportuj do PDF" do pulpitu nawigacyjnego administratora wydaje się małą funkcją. W praktyce eliminuje to powtarzające się zadanie ręczne, daje użytkownikom nietechnicznym możliwość, z której korzystali przez lata, i tworzy dokument, który odzwierciedla rzeczywisty wygląd danych, a nie uszkodzoną wersję dialogowego dialogu druku.

IronPDF radzi sobie z złożonością renderowania — wykonywaniem JavaScript, typami mediów CSS, uchwytywaniem wykresów — więc implementacja po twojej stronie to działanie kontrolera i szablon HTML. Jeśli chcesz przetestować to na swoim własnym pulpicie nawigacyjnym, dostępne są 30-dniowe darmowe testy z pełnymi funkcjami i bez znaków wodnych na ironpdf.com.