1. IronPDF
  2. Tutoriels
  3. Débogage HTML Chrome
Comment convertir HTML en PDF avec C# en .NET 8 | IronPDF

Comment déboguer HTML dans Chrome pour créer des PDF parfaits en C#

Curtis Chau
Curtis Chau
Mis à jour:
This article was translated from English: Does it need improvement?
Translated
View the article in English

En tant que développeurs d'IronPDF, nous comprenons que les documents PDF créés par IronPDF doivent non seulement être parfaits, mais aussi correspondre exactement à ce que nos clients attendent. Pour que vos PDF soient pixel parfaits, vous devrez développer d'excellents modèles HTML ou travailler avec un développeur Web pour le faire à votre place. IronPDF a les options pour rendre vos PDF pixel parfaits avec votre HTML et apparaître identiques à la façon dont ils apparaissent dans Chrome grâce à notre Chrome Renderer.

comme-titre:2(Démarrage rapide: Création de PDF Pixel-Parfaits avec IronPDF)

Convertissez sans effort votre HTML en PDF pixel-parfaits en utilisant le puissant Chrome Renderer d'IronPDF. Ce guide rapide vous aide à obtenir des sorties PDF précises et prévisibles en tirant parti du support complet d'IronPDF pour HTML5, CSS3 et JavaScript. En quelques lignes de code, vous pouvez rendre votre contenu HTML exactement comme il apparaît dans Chrome, assurant une transition sans heurt du web au PDF. Parfait pour les développeurs souhaitant maintenir la précision de la mise en page sans compromettre la facilité d'utilisation.

Nuget IconCommencez dès maintenant à créer des PDF avec NuGet :

  1. Installez IronPDF avec le gestionnaire de packages NuGet

    PM > Install-Package IronPdf

  2. Copiez et exécutez cet extrait de code.

    var Renderer = new IronPdf.ChromePdfRenderer();
Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Imprimer;
Renderer.RenderHtmlAsPdf("<html>Your HTML content here</html>").SaveAs("output.pdf");

  3. Déployez pour tester sur votre environnement de production.

    Commencez à utiliser IronPDF dans votre projet dès aujourd'hui grâce à un essai gratuit.
    arrow pointer

Qu'est-ce que le Chrome Renderer d'IronPDF?

Cela rend IronPDF unique par rapport aux autres bibliothèques PDF .NET

IronPDF se distingue sur le marché car il utilise le Google Chromium Renderer, ce qui signifie que le HTML que vous voyez dans les navigateurs Chrome ressemblera exactement à ce que vous voyez dans nos PDF. Dans ce tutoriel, nous vous guiderons à travers certains réglages que vous devrez appliquer dans Chrome et dans IronPDF pour y parvenir.

Pour être clair, de nombreuses technologies revendiquées "HTML to PDF" mises en œuvre par des concurrents ne sont pas conformes aux normes W3C, ou même ne supportent pas HTML5, CSS3 ou JavaScript, et utilisent des moteurs de rendu sous-jacents tels que wkhtmltopdf.

IronPDF comparé aux concurrents

IronPDF

IronPDF

Télécharger le PDF

Vanilla Chrome

Vanilla Chrome

Télécharger le PDF

Aspose.PDF

Aspose.PDF

Télécharger le PDF

iText

iText

Télécharger le PDF

wkhtmltopdf

wkhtmltopdf

Télécharger le PDF

Pour voir la liste complète des comparaisons avec d'autres produits, consultez notre blog.

[pFeatures related to IronPDF comparé aux concurrents Caractéristiques]|Chrome Renderer d'IronPDF|Aspose vs IronPDF|iText vs IronPDF

Le Chrome Renderer optimisé d'IronPDF est meilleur que Chrome

Deux exemples d'IronPDF surpassant Chrome lui-même. Les boutons et le texte qui seraient autrement divisés sur deux pages avec Chrome restent intacts avec IronPDF.

Exemple de boutons et de texte coupés dans Chrome

Bouton coupé dans Chrome mais pas dans IronPDF

Un autre exemple de texte coupé dans Chrome

Texte coupé dans Chrome mais pas dans IronPDF

Pourquoi utiliser HTML vers PDF ?

Les développeurs aiment HTML vers PDF parce qu'il produit des résultats prévisibles qui correspondent à la marque web existante. La conception est mise en œuvre en utilisant des technologies HTML, CSS et JavaScript bien documentées et normalisées.

  • La mise en page et le design de la sortie correspondent exactement au site Web.
  • Les développeurs web peuvent se concentrer sur la conception avec une précision absolue.
  • Les développeurs .NET peuvent se concentrer sur la logique de l'application plutôt que sur la mise en page. Les développeurs back-end peuvent déléguer les tâches de mise en page et de conception aux designers web.

1. Décider d'utiliser le type de média CSS Imprimer ou Écran

Le moteur de rendu d'IronPDF a deux options de rendu de média : Imprimer (par défaut) et Écran. Pour un comparaison visuelle côte à côte, veuillez voir la fin de ce tutoriel sous la section "Comparaison d'un exemple de Écran et Imprimer".

  • CssMediaType.Imprimer est l'option par défaut pour optimiser votre HTML pour l'impression. Cela signifie que certaines images d'arrière-plan, icônes et autres éléments gourmands en encre peuvent être rendus différemment ou être omis. Cette option est bonne pour les documents sans images d'arrière-plan et est l'aperçu par défaut pour l'impression.
  • CssMediaType.Écran est l'option de rendu qui permettra à vos PDF d'apparaître exactement comme ils apparaissent dans Chrome sur votre écran. Vous devrez configurer quelques options dans votre navigateur Chrome pour que l'aperçu avant impression ressemble exactement à ce qu'IronPDF rendra à des fins de débogage HTML.
:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-1.cs
// Pixel Perfect HTML Formatting Settings
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print; // or Screen
$vbLabelText   $csharpLabel

En-têtes de table répétitifs

Si vous avez un HTML contenant un tableau qui s'étendra sur plus d'une page, vous voudriez probablement que les en-têtes de tableau se répètent sur chaque page PDF.

  • Dans ce cas, vous pouvez uniquement utiliser le Imprimer CssMediaType.
  • L'utilisation de Écran instruit Chrome pour n'imprimer les en-têtes qu'une seule fois.

Comparaison d'un exemple de Écran et Imprimer

De nombreuses images et icônes ne se chargeront pas en mode Imprimer qui se chargeront en mode Écran:

Exemple d'impression 1 Exemple d'Écran 1

2. Configurer Chrome

IronPDF utilise fièrement un moteur de rendu Chrome. Suivez ces étapes pour qu'IronPDF rende votre HTML exactement comme vous le voyez dans Chrome. Ce sont les quelques étapes à réaliser à l'avance dans Chrome pour y parvenir.

Pour rendre des PDF Pixel Parfaits incluant toutes les images, icônes et arrière-plans qui sont souvent omis en format d'impression, assurez-vous d'utiliser l'option CSS Media Écran.

2a. Ouvrez DevTools et configurez l'émulation CSS media sur Écran/Imprimer dans Chrome

  1. Pour ce faire, dans Chrome ouvrez DevTools.

Utiliser Inspecter dans Chrome

  1. Appuyez sur Command+Shift+P (Mac) ou Control+Shift+P (Windows, Linux, ChromeOS) pour ouvrir le Menu de Commandes. Commencez à taper rendering, sélectionnez Show Rendering et appuyez sur Entrée. DevTools affiche l'onglet de rendu en bas de votre fenêtre DevTools. Plus d'aide

Aller à Show Rendering puis trouver le type de média CSS

  1. Descendez et trouvez le menu déroulant pour Emulate CSS media et choisissez l'option Écran ou Imprimer. Si vous êtes sur une page web, vous devrez peut-être recharger (Ctrl+R) pour que les réglages prennent effet.
Switch to CSS Media Type Imprimer

Imprimer

Switch to CSS Media Type Écran

Écran

2b. Ouvrez la fenêtre Aperçu avant impression (Ctrl+P sous Windows)

Vous devrez peut-être changer la taille du papier et activer 'imprimer les images de fond' dans la boîte de dialogue Imprimer de Chrome afin d'obtenir un affichage précis.

2c. Configurer les réglages corrects pour l'Aperçu avant impression

  • Veuillez choisir la taille de papier que vous utilisez dans votre projet IronPDF, comme A4 ou Letter.
  • Sous le menu déroulant Margins, sélectionnez Custom et réglez toutes les quatre côtés à (1") une pouce de marge.
  • Activer la case à cocher Background Graphics.
  • Assurez-vous de régler votre Layout sur Landscape si vous prévoyez de produire un document en paysage.

Et c'est tout. Vous pouvez maintenant déboguer votre HTML et utiliser l'aperçu avant impression pour voir exactement comment IronPDF rendra votre mise en page.

3. Configurer IronPDF

3a. Configurer le type de média CSS dans IronPDF

Pour faire correspondre le design de la page web avec une précision de 100%, nous devons choisir le même type de média CSS que celui que nous avons configuré dans Chrome dans notre code.

Rappelez-vous que PdfCssMediaType.Écran inclut les arrière-plans, et des images plus grandes qui peuvent être omises au format PdfCssMediaType.Imprimer qui est le défaut et conçu pour les imprimantes afin d'économiser de l'encre.

:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-2.cs
// Example using PdfCssMediaType.Screen
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen; // or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
$vbLabelText   $csharpLabel

3b. Configurer le délai de rendu et le délai d'expiration de rendu de façon appropriée

Le temps d'attente de rendu par défaut d'IronPDF est de 60 secondes. Tout ce qui prend plus de temps à traiter ne rendra pas sans modifier les options de rendu. Pour modifier les paramètres par défaut, vous devrez ajuster l'option RenderingOptions.Timeout.

Gardez à l'esprit que si aucun délai n'est défini ou si le délai de rendu est plus long que le délai défini, une exception Unable to Render PDF se produira. Donc, si vous rencontrez cette erreur, vous devrez peut-être augmenter ces valeurs.

:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-3.cs
// Example of setting Timeout and RenderDelay options
renderer.RenderingOptions.Timeout = 90; // seconds (default is 60)
renderer.RenderingOptions.WaitFor.RenderDelay(30000); // milliseconds
$vbLabelText   $csharpLabel

Prêt à voir ce que vous pouvez faire d'autre? Consultez notre page de tutoriels ici : Fonctionnalités supplémentaires

Questions Fréquemment Posées

Comment puis-je obtenir un rendu PDF parfait au pixel près à partir de HTML ?

Pour obtenir un rendu PDF parfait au pixel près à partir de HTML, vous pouvez utiliser le Chrome Renderer d'IronPDF, qui garantit que le contenu HTML affiché dans les navigateurs Chrome est identique aux PDF générés.

Quels sont les avantages d'utiliser IronPDF pour la conversion HTML en PDF ?

IronPDF permet aux développeurs de générer des PDF qui correspondent à l'apparence visuelle du contenu HTML dans les navigateurs web, supportant HTML5, CSS3 et JavaScript, contrairement à de nombreuses autres bibliothèques.

Comment puis-je configurer les types de médias CSS dans IronPDF ?

Vous pouvez configurer les types de médias CSS dans IronPDF en sélectionnant 'Print' pour les documents sans arrière-plan ou 'Screen' pour correspondre à l'apparence à l'écran, garantissant que la sortie PDF s'aligne avec vos besoins.

Quelles étapes dois-je suivre pour configurer Chrome pour le rendu PDF ?

Pour configurer Chrome pour le rendu PDF, ouvrez DevTools, activez 'Simuler le média CSS' en 'Screen/Print', et ajustez les paramètres d'aperçu avant impression pour vous assurer que le PDF correspond à la mise en page souhaitée.

Comment résoudre les problèmes de rendu avec IronPDF ?

Si vous rencontrez des problèmes de rendu, tels qu'une exception 'Impossible de rendre le PDF', essayez d'augmenter les paramètres de Render Delay ou Render Timeout dans les options d'IronPDF pour obtenir de meilleurs résultats.

Puis-je utiliser IronPDF pour rendre des PDF qui correspondent au design web ?

Oui, IronPDF vous permet de rendre des PDF qui correspondent précisément à votre design web en utilisant le Google Chromium Renderer, offrant un support pour toutes les technologies web modernes.

Pourquoi IronPDF utilise-t-il le Google Chromium Renderer ?

IronPDF utilise le Google Chromium Renderer pour garantir que le HTML affiché dans les navigateurs Chrome soit identique aux PDF créés, fournissant une sortie cohérente et de haute qualité.

IronPDF est-il compatible avec .NET 10 et puis-je l'utiliser dans de nouveaux projets .NET 10 ?

Oui. IronPDF prend explicitement en charge .NET 10 (ainsi que .NET 9, .NET 8 et les versions antérieures) et est compatible nativement. Vous pouvez donc utiliser .NET 10 dans vos projets et exploiter les API HTML vers PDF, de rendu, d'édition et de signature d'IronPDF sans avoir besoin de solutions de contournement particulières.

Curtis Chau
Curtis Chau
  Discutez maintenant avec l'équipe d'ingénierie
Rédacteur technique

Curtis Chau détient un baccalauréat en informatique (Université de Carleton) et se spécialise dans le développement front-end avec expertise en Node.js, TypeScript, JavaScript et React. Passionné par la création d'interfaces utilisateur intuitives et esthétiquement plaisantes, Curtis aime travailler avec des frameworks modernes ...

Lire la suite
Prêt à commencer?
Nuget Téléchargements 17,012,929 | Version : 2025.12 vient de sortir