1. IronPDF
  2. Guides pratiques
  3. Déboguer HTML avec Chrome
Comment déboguer HTML dans Chrome pour créer des PDFs pixel parfaits

How to Debug HTML in Chrome to Create Pixel Perfect PDFs

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 ne doivent pas seulement être parfaits visuellement, mais doivent aussi correspondre exactement aux attentes de nos clients. Pour obtenir des PDF parfaits en pixels, vous devrez développer d'excellents modèles HTML ou collaborer avec un développeur web pour les créer pour vous. IronPDF propose des options pour rendre vos PDF parfaitement en pixels à votre HTML, garantissant qu'ils apparaissent identiques à leur affichage dans Chrome grâce à notre Chrome Renderer.

en-tête:2(Démarrage rapide : Générez des PDF parfaits en pixels avec IronPDF)

Avec le Chrome Renderer d'IronPDF, la conversion de HTML en PDF est un jeu d'enfant. Ce guide aide les développeurs à produire des documents PDF parfaits en pixels qui reflètent exactement leurs conceptions HTML telles qu'elles apparaissent dans un navigateur Chrome. Le processus garantit que les éléments HTML5, CSS3 et JavaScript sont entièrement pris en charge, contrairement à de nombreux concurrents. Suivez ces étapes pour créer rapidement des PDF qui conservent votre branding Web et l'intégrité du design sans effort.

Nuget IconGet started making PDFs with NuGet now:

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Copy and run this code snippet.

    IronPdf.ChromePdfRenderer.RenderHtmlAsPdf("<html><body>Hello World</body></html>").SaveAs("output.pdf");

  3. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    arrow pointer

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

Il rend IronPDF unique parmi les autres bibliothèques PDF .NET

IronPDF est distinct sur le marché car il utilise le Google Chromium Renderer, ce qui signifie que le HTML que vous voyez dans les navigateurs Chrome sera exactement le même que ce que vous voyez dans nos PDF. Dans ce guide, nous vous expliquerons certains réglages que vous devrez appliquer dans Chrome et dans IronPDF pour y parvenir.

Pour être clair, de nombreuses technologies proclamées "HTML à PDF" mises en œuvre par des concurrents ne respectent pas les normes W3C, ni même ne prennent en charge HTML5, CSS3, ou JavaScript, et utilisent des moteurs de rendu sous-jacents tels que wkhtmltopdf dans la comparaison C#.

IronPDF comparé aux concurrents

class="competitors-section__wrapper-even-1">
class="competitors__card">

class="competitors__header">IronPDF

IronPDF

class="competitors__download-link"> Télécharger le PDF

class="competitors__card">

class="competitors__header">Vanilla Chrome

Vanilla Chrome

class="competitors__download-link"> Télécharger le PDF

class="competitors-section__wrapper">
class="competitors__card">

class="competitors__header">Aspose.PDF

Aspose.PDF

class="competitors__download-link"> Télécharger le PDF

class="competitors__card">

class="competitors__header">iText

iText

class="competitors__download-link"> Télécharger le PDF

class="competitors__card">

class="competitors__header">wkhtmltopdf

wkhtmltopdf

class="competitors__download-link"> Télécharger le PDF

Pour voir une liste complète des comparaisons avec d'autres produits, voir notre blog de comparaison.

Features of Iron Software Libraries | Using IronPDF's Chrome Rendering Engine | Aspose vs IronPDF Analysis | iText vs IronPDF Comparison

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

Deux exemples de dépassement d'IronPDF par rapport à Chrome lui-même. Les boutons et le texte qui seraient autrement découpés en deux pages avec Chrome restent intacts avec IronPDF.

Exemple de boutons et de texte coupés dans Chrome :

class="content-img-align-center">
class="center-image-wrapper"> Bouton coupé dans Chrome mais pas dans IronPDF

Un autre exemple de texte coupé dans Chrome :

class="content-img-align-center">
class="center-image-wrapper"> Texte coupé dans Chrome mais pas dans IronPDF

Pourquoi utiliser HTML en PDF ?

Les développeurs adorent HTML en PDF parce qu'il offre des résultats prévisibles qui correspondent au branding Web existant. La conception est mise en œuvre en utilisant des technologies HTML, CSS et JavaScript bien documentées et standardisé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 design aux designers Web.

1. Décidez d'utiliser le type de média CSS Print ou Screen

Le moteur de rendu d'IronPDF a deux options de rendu de média : Print (par défaut) et Screen. Pour une comparaison visuelle côte à côte, veuillez voir la fin de cette section. Sous la section "Comparaison de l'exemple d'écran et d'impression".

  • CssMediaType.Print est l'option de rendu par défaut qui optimise votre HTML pour une utilisation générale avec une imprimante. Cela signifie que certaines images de fond, icônes et autres éléments très encrés sur la page peuvent rendre différemment ou être omis. Cette option est bonne pour les documents sans images de fond et est l'aperçu par défaut.
  • CssMediaType.Screen est l'option de rendu qui permettra à vos PDF d'apparaître exactement comme ils apparaissent dans Chrome. Vous devrez configurer quelques options dans votre navigateur Chrome pour que l'aperçu de l'impression ressemble exactement à ce qu'IronPDF rendra aux fins de débogage HTML.
:path=/static-assets/pdf/content-code-examples/how-to/pixel-perfect-html-to-pdf-1.cs
// Pixel Perfect HTML Formatting Settings
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print; // or Screen
' Pixel Perfect HTML Formatting Settings
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print ' or Screen
$vbLabelText   $csharpLabel

Réitération des En-têtes de Table

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

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

Comparaison de l'exemple d'écran et d'impression

De nombreuses images et icônes ne se chargeront pas en mode Print qui se chargeront en mode Screen :

Exemple d'Imprimé 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 qui doivent être effectuées au préalable dans Chrome pour y parvenir.

Pour rendre des PDF pixel-parfaits comprenant toutes les images, icônes et arrière-plans généralement omis au format impression, assurez-vous d'utiliser l'option CSS Media Screen.

2a. Ouvrez DevTools et activez l'émulation du média CSS à Écran/Imprimer dans Chrome

  1. Pour ce faire, dans Chrome ouvrez DevTools dans Chrome.
Utiliser l'inspection dans Chrome
  1. Appuyez sur Commande+Maj+P (Mac) ou Contrôle+Maj+P (Windows, Linux, ChromeOS) pour ouvrir le Menu de Commande. Commencez à taper rendu, sélectionnez Afficher le rendu, et appuyez sur Entrée. DevTools affiche l'onglet Rendu en bas de la fenêtre DevTools. Plus d'aide sur les paramètres de rendu
Accéder à Afficher le rendu et puis à Trouver le type de média CSS
  1. Naviguez vers le bas et trouvez le menu déroulant pour Émuler le média CSS et choisissez l'option Screen ou Print. Si vous êtes sur une page web, vous devrez peut-être recharger (Ctrl+R) pour que les paramètres prennent effet.
class="competitors-section__wrapper-even-1">
Passer au type de média CSS Print

Imprimer

Passer au type de média CSS Screen

Écran

2b. Ouvrez la fenêtre d'aperçu de l'impression (Ctrl+P sur Windows)

Vous devrez peut-être changer la taille du papier et activer 'l'impression des images de fond' dans le dialogue d'impression Chrome pour obtenir un affichage précis.

2c. Définissez les paramètres corrects de l'aperçu d'impression

  • Veuillez choisir la taille de papier que vous utilisez dans votre projet IronPDF, telle que A4, ou Lettre.
  • Sous le menu déroulant Marges, sélectionnez Personnalisée et définissez les quatre côtés à une marge d'un pouce (1").
  • Activez la case à cocher Graphiques de fond.
  • Assurez-vous de régler votre Mise en page sur Paysage si vous avez l'intention de sortir un document en paysage.

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

3. Configurer IronPDF

3a. Définir 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 nous avons défini dans Chrome dans notre code.

Rappelons que PdfCssMediaType.Screen inclut les images de fond et les images plus grandes qui peuvent être omises dans le format PdfCssMediaType.Print, qui est le paramètre par défaut et conçu pour les imprimantes pour économiser l'encre.

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

3b. Définir de manière appropriée les délais de rendu et les délais d'attente

Le délai d'attente de rendu par défaut d'IronPDF est de 60 secondes. Si le processus de rendu prend plus longtemps que cela, une exception de délai d'attente sera lancée. Pour modifier les paramètres par défaut, vous devrez ajuster l'option RenderingOptions.Timeout. La valeur de délai de rendu, d'autre part, est le temps qu'IronPDF doit attendre avant de commencer à rendre. Ce temps d'attente est crucial pour que les ressources telles que les images, les polices et le code JavaScript s'exécutent correctement.

:path=/static-assets/pdf/content-code-examples/how-to/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
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

Gardez à l'esprit qu'avoir aucun temps d'attente défini ou avoir un délai de rendu plus long que votre temps d'attente défini produira une exception "Impossible de rendre le PDF". Ainsi, si vous rencontrez cette erreur, vous devrez peut-être augmenter ces valeurs.

Veuillez noterAspose, iText, wkhtmltopdf, et PuppeteerSharp sont des marques déposées de leurs propriétaires respectifs. Ce site n'est affilié à, approuvé ou sponsorisé par Aspose, iText, wkhtmltopdf ou Puppeteer. Les comparaisons sont fournies uniquement à titre d'information et sont basées sur des informations disponibles publiquement au moment de l'écriture.
Les comparaisons sont fournies à des fins d'information seulement et sont basées sur des informations publiquement disponibles au moment de l'écriture.)}]

Questions Fréquemment Posées

Comment puis-je créer des PDFs pixel-parfait à partir de HTML ?

Vous pouvez créer des PDFs pixel-parfait à partir de HTML en utilisant le rendu Chrome d'IronPDF, qui garantit que le HTML que vous voyez dans les navigateurs Chrome ressemblera exactement à vos PDFs.

Quelle est l'importance d'utiliser le rendu Chrome dans la création de PDF ?

Le rendu Chrome dans IronPDF permet de rendre HTML5, CSS3 et JavaScript avec précision, garantissant que vos PDFs apparaissent comme ils le sont dans les navigateurs Chrome, contrairement à certaines autres bibliothèques .NET.

Comment choisir entre les types de médias CSS 'Print' et 'Screen' pour le rendu PDF ?

Dans IronPDF, utilisez le type de média CSS 'Print' pour des documents adaptés à l'impression et 'Screen' pour une représentation fidèle à l'affichage. Ajustez ces paramètres dans le ChromePdfRenderer pour répondre à vos besoins.

Pourquoi est-il important de configurer Chrome correctement pour le rendu PDF ?

Configurer Chrome correctement est crucial pour des aperçus d'impression précis, ce qui aide à obtenir des sorties PDF pixel-parfait avec IronPDF en assurant que votre environnement de développement reflète les paramètres de production.

Comment puis-je ajuster les paramètres de délai et de timeout de rendu dans IronPDF ?

Ajustez les paramètres de Délai de Rendu et de Timeout dans IronPDF en utilisant RenderingOptions.RenderDelay et RenderingOptions.Timeout dans le ChromePdfRenderer pour gérer les temps de chargement des ressources.

Que dois-je faire si je rencontre des erreurs 'Impossible de Rendre le PDF' ?

Si vous rencontrez des erreurs 'Impossible de Rendre le PDF', cela peut être dû à un délai de rendu plus long que le timeout défini. Augmentez les valeurs de Délai de Rendu et de Timeout dans IronPDF pour résoudre ce problème.

Comment peut-on gérer les en-têtes de table récurrents dans le rendu PDF ?

Pour gérer les en-têtes de table récurrents sur les pages dans IronPDF, utilisez le type de média CSS 'Print', qui garantit que les en-têtes seront répétés sur chaque page durant le rendu PDF.

Quels réglages de mise en page doivent être configurés dans Chrome pour une création PDF précise ?

Dans l'aperçu avant impression de Chrome, choisissez la bonne Taille de Papier, définissez les Marges sur Personnalisé avec un pouce de chaque côté, activez les Graphiques d'Arrière-plan, et sélectionnez la mise en page en Paysage si nécessaire pour une création PDF précise.

IronPDF est-il compatible avec .NET 10, et en quoi l'utilisation de .NET 10 améliore-t-elle le rendu HTML vers PDF au pixel près ?

Oui, IronPDF est entièrement compatible avec .NET 10, ce qui améliore les performances d'exécution et de compilation JIT (notamment grâce à la dévirtualisation des méthodes d'interface de tableau et à l'allocation de pile), rendant la génération de PDF plus rapide et plus efficace. L'utilisation de .NET 10 avec IronPDF permet à vos flux de travail HTML vers PDF (y compris le rendu avec le moteur de rendu Chrome, la gestion des paramètres de type de média, les délais, les expirations, etc.) de bénéficier d'une latence réduite, d'une consommation de mémoire moindre et d'un fonctionnement globalement plus fluide.

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 16,154,058 | Version : 2025.11 vient de sortir