Pixel Perfect HTML Formatting in IronPDF

Mis à jour:septembre 10, 2025

Translated

View the article in English

role="alert"> Votre entreprise dépense trop en abonnements annuels pour la sécurité et la conformité des PDF. Pensez à IronSecureDoc, qui propose des solutions pour gérer des services SaaS comme la signature numérique, la rédaction, le cryptage et la protection, le tout pour un paiement unique. Essayez-le maintenant

Pour que vos PDFs soient parfaits, vous devrez développer d'excellents modèles HTML ou travailler avec un développeur web pour le faire pour vous. Cet article de dépannage est tiré d'un tutoriel complet sur le débogage de votre HTML.

1. Déboguer et tester votre HTML

Vous pouvez déboguer votre HTML, CSS et JS dans votre Chrome ou un navigateur de bureau similaire. Ensuite, lorsque vous savez qu'il fonctionne parfaitement, connectez-le à IronPDF, et il ressemblera exactement à ce qu'il est dans Chrome.

Utilisation basique

Cet exemple de code rendra des PDFs pixel parfaits au dernier navigateur de bureau Chrome.

// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;

// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;

' Create a new ChromePdfRenderer instance
Dim renderer As New ChromePdfRenderer()

' Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print

' Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = True

$vbLabelText $csharpLabel

Développement HTML avancé

Les développeurs utilisateurs avancés de Chrome peuvent atteindre une précision de 100% en utilisant les paramètres par défaut d'IronPDF et en activant 'Émuler les médias CSS > Écran'. Vous trouverez plus d'informations ici.

// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;

// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;

' Create a new ChromePdfRenderer instance
Dim renderer As New ChromePdfRenderer()

' Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen

' Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = True

$vbLabelText $csharpLabel

2. Comparer le résultat

Pour comparer le résultat, ouvrez votre HTML dans le navigateur web de bureau Chrome.

Remarque : Exportez toute chaîne HTML et ses ressources vers des fichiers HTML indépendants et éditez-les manuellement, ou demandez l'aide d'un développeur web.

Comparaison du résultat PDF

3. Ouvrir la fenêtre d'aperçu avant impression (Ctrl+P sur Windows)

Vous devrez peut-être changer la taille du papier et activer l'impression des images d'arrière-plan dans la boîte de dialogue d'impression de Chrome.

Fenêtre d'aperçu avant impression

4. Sélectionner l'option 'Enregistrer en PDF'

Une fois l'impression en PDF dans Chrome parfaite, IronPDF la correspondra.

Option d'enregistrement en PDF

5. Exécuter IronPDF

Maintenant que le HTML est parfait, exécutez-le avec IronPDF, et il apparaîtra identique. Utilisez {PlaceHolders} pour intégrer les données clients. Les exemples de code sur IronPDF Examples vous aideront vraiment !

Si ce tutoriel ne résout pas votre problème, veuillez contacter le support technique, et nous adapterons et améliorerons notre documentation pour vous assister davantage.

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 ...

Prêt à commencer?

Nuget Téléchargements 16,154,058 | Version : 2025.11 vient de sortir