Exportation en un clic vers le format PDF en C# pour les tableaux de bord d'administration

Le problème de l'exportation des tableaux de bord

page d'accueil d'IronPDF Les tableaux de bord internes sont conçus pour être consultés dans un navigateur web. Dès que quelqu'un a besoin de partager un document extérieur : une présentation de réunion du conseil d'administration, un aperçu hebdomadaire des indicateurs clés de performance pour l'équipe de direction ou un rapport d'audit de conformité, les choses se gâtent rapidement.

L'impression au format PDF à partir d'un navigateur est la première chose que les gens essaient et la première chose qui échoue. Les pages se cassent et se coupent à travers les graphiques, les barres latérales de navigation empiètent sur la mise en page, et le PDF résultant ne ressemble en rien au tableau de bord réel. Les captures d'écran sont encore pires : la résolution se dégrade lorsqu'elles sont mises à l'échelle au format A4, le texte n'est pas consultable et une vue d'ICP en plusieurs sections tient rarement dans une seule image sans que la moitié des données ne soient perdues.

Le problème le plus profond est celui des graphiques en JavaScript. Étant donné que Chart.js, ApexCharts et Highcharts dessinent sur un élément HTML de manière asynchrone, un instantané HTML-PDF natif capture souvent un canevas vide. Le contenu HTML est présent dans le DOM, mais pas la visualisation. C'est là que IronPDF peut vous aider.

Le résultat est un développeur qui reçoit tous les lundis une icône de message lui demandant d'extraire et de formater manuellement un rapport. Il ne s'agit pas d'un flux de travail évolutif. Aujourd'hui, nous allons examiner un exemple d'IronPDF pour voir comment il peut créer des documents PDF à partir de contenu HTML.

La solution : Rendu de tableau de bord côté serveur avec IronPDF

IronPDF rend le même HTML qui alimente votre tableau de bord en un document PDF parfait au pixel près. L'utilisateur clique sur un bouton "Exporter au format PDF" (éventuellement marqué d'une clé dans un cercle bleu ou d'une clé bleue dans un cercle), un point de terminaison API gère la logique de conversion HTML et le navigateur télécharge le contenu PDF.

Il n'y a pas de sidecar Puppeteer à déployer, pas de binaire wkhtmltopdf à gérer et pas d'API d'exportation tierce à payer et à surveiller. IronPDF s'exécute dans votre application ASP.NET existante en tant que bibliothèque NuGet C# pour les tâches PDF. Il intègre un moteur Chromium qui exécute JavaScript de la même manière qu'un véritable navigateur, ce qui signifie que Chart.js et ApexCharts s'affichent correctement, car ils s'exécutent avant que la page ne soit capturée.

Le bouton d'exportation devient une fonction en libre-service que n'importe quel utilisateur professionnel peut utiliser, sans faire appel à un développeur.

Comment ça marche en pratique

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

Avis Réels

Libre-service pour les utilisateurs professionnels. Une fois le bouton d'exportation activé, les messages Slack du type " peux-tu me générer un rapport ? " cessent. Tout utilisateur ayant accès au tableau de bord peut télécharger son propre PDF sans avoir à en faire la demande.

Fidélité des graphiques. Comme Chromium exécute le JavaScript à l'intérieur d'IronPDF, les graphiques Chart.js, ApexCharts et Highcharts s'affichent dans le PDF exactement comme ils apparaissent à l'écran — y compris les couleurs, les info-bulles affichées sous forme d'étiquettes statiques et le redimensionnement adaptatif.

Cohérence de la marque. Chaque rapport exporté comporte le logo de l'entreprise, la palette de couleurs et la typographie définies dans la feuille de style du tableau de bord. Il n'y a pas d'étape de reformatage entre l'exportation et la distribution.

Génération planifiée. Associez l'appel de rendu à une tâche en arrière-plan pour envoyer automatiquement par e-mail des fichiers PDF hebdomadaires ou mensuels aux parties prenantes. La direction reçoit un rapport soigné sans que personne n'ait à le générer manuellement.

Aucune dépendance externe. IronPDF s'exécute en cours de traitement. Il n'y a pas de processus Puppeteer Node.js à maintenir en vie, pas de binaire wkhtmltopdf à intégrer par plateforme, et pas d'API d'exportation SaaS avec des limites de débit ou une tarification par document.

Mise en page optimisée pour l'impression. CssMediaType.PRINT applique vos règles @media PRINT au moment du rendu, vous permettant de définir une mise en page propre et spécifique à l'exportation en CSS sans avoir à gérer un modèle HTML distinct.

Conclusion

Ajouter un bouton " Exporter au format PDF " à un tableau de bord d'administration peut sembler être une fonctionnalité mineure. Concrètement, cela élimine une tâche manuelle récurrente, offre aux utilisateurs non techniques une fonctionnalité qu'ils contournent depuis des années, et produit un document qui reflète l'apparence réelle des données plutôt qu'une approximation approximative issue d'une boîte de dialogue d'impression défectueuse.

IronPDF gère la complexité du rendu — exécution JavaScript, types de médias CSS, capture de graphiques — de sorte que la mise en œuvre de votre côté se résume à une action du contrôleur et à un modèle HTML. Si vous souhaitez le tester sur votre propre tableau de bord, un essai gratuit de 30 jours avec toutes les fonctionnalités et sans filigrane est disponible sur IronPDF.com.