Comment déboguer le HTML dans Chrome pour créer des PDF parfaits comme des pixels

Chaknith Bin

septembre 22, 2021

Mise à jour décembre 24, 2024

Translated

View the article in English

En tant que développeurs d'IronPDF, nous comprenons que les documents PDF réalisés par IronPDF doivent non seulement être parfaits, mais aussi ressembler exactement à ce que nos clients attendent d'eux. Pour obtenir des PDF parfaits au pixel près, vous devrez développer d'excellents modèles HTML ou collaborer avec un développeur web qui les créera pour vous. IronPDF offre des options pour rendre vos PDF au pixel près à votre HTML, en s'assurant qu'ils apparaissent identiques à la façon dont ils s'affichent dans Chrome grâce à notre Chrome Renderer.

Qu'est-ce que le moteur de rendu Chrome d'IronPDF ?

C'est ce qui rend IronPDF unique par rapport aux autres bibliothèques PDF .NET

IronPDF se distingue sur le marché en utilisant le moteur de rendu Google Chrome, ce qui signifie que le HTML que vous voyez dans les navigateurs Chrome sera exactement le même que celui que vous voyez dans nos PDF. Dans ce guide, nous allons vous présenter certains paramètres que vous devrez appliquer dans Chrome et dans IronPDF pour y parvenir.

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

IronPDF comparé à ses concurrents

Download PDF

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

Fonctionnalités des bibliothèques Iron Software Utilisation du moteur de rendu Chrome d'IronPDF Analyse Aspose vs IronPDF Comparaison iText vs IronPDF

Le moteur de rendu optimisé d'IronPDF pour Chrome est meilleur que Chrome

Deux exemples où IronPDF surpasse Chrome lui-même. Les boutons et le texte qui seraient autrement répartis 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

Autre exemple de texte coupé dans Chrome :

"Texte tronqué dans Chrome mais pas dans IronPDF"

Pourquoi utiliser HTML to PDF ?

Les développeurs apprécient la conversion de HTML en PDF car elle permet d'obtenir des résultats prévisibles qui correspondent à l'image de marque existante sur le web. La conception est mise en œuvre à l'aide de technologies HTML, CSS et JavaScript standardisées et bien documentées.

La mise en page et la conception de la traduction doivent correspondre 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 présentation. Les développeurs back-end peuvent déléguer les tâches de mise en page et de conception aux concepteurs de sites web.

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

Le moteur de rendu d'IronPDF dispose de deux options de rendu de médias : Print (par défaut) et Screen. Pour une comparaison visuelle côte à côte, veuillez consulter la fin de cette section. Dans la section "Comparaison de l'écran et de l'exemple 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 d'arrière-plan, icônes et autres éléments à forte teneur en encre de la page peuvent s'afficher différemment ou être omis. Cette option convient aux documents sans images d'arrière-plan et constitue l'aperçu d'impression par défaut.
CssMediaType.Screen est l'option de rendu qui permettra à vos PDF de ressembler exactement à leur apparence dans Chrome sur votre écran. Vous devrez configurer certaines options dans votre navigateur Chrome pour permettre à l'aperçu d'impression de ressembler exactement au rendu d'IronPDF à des 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épétition des en-têtes de tableaux

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

Dans ce cas, vous pouvez seulement utiliser le CssMediaType Print.
L'utilisation de Screen indique à Chrome d'imprimer les en-têtes une seule fois.

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

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

2. Configurer Chrome

IronPDF est fier d'utiliser 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 au préalable dans Chrome pour y parvenir.

Pour générer des PDF parfaitement pixelisés qui incluent toutes les images, icônes et arrière-plans généralement omis dans le format d'impression, assurez-vous d'utiliser l'option CSS Media Screen.

2a.

Ouvrez DevTools et activez l'option Émuler les médias CSS à l'écran/impression dans Chrome

Pour ce faire, ouvrez DevTools dans Chrome dans Chrome.

Appuyez sur Commande+Maj+P (Mac) ou Contrôle+Maj+P (Windows, Linux, ChromeOS) pour ouvrir le Menu Commande. Commencez à taper rendu, sélectionnez Afficher le rendu et appuyez sur Entrée. DevTools affiche l'onglet Rendu en bas de votre fenêtre DevTools. Plus d'aide sur les paramètres de rendu
Descendez et trouvez le menu déroulant pour Emuler les médias CSS et choisissez l'option Écran ou Imprimer. Si vous êtes sur une page web, vous devrez peut-être recharger (Ctrl+R) pour que les paramètres prennent effet.

Imprimer

Écran

2b.

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

Il se peut que vous deviez modifier le format du papier et activer l'impression d'images d'arrière-plan dans la boîte de dialogue d'impression de Chrome afin d'obtenir un affichage précis.

2c.

Définir les paramètres corrects de l'aperçu avant impression

Veuillez choisir le format de papier que vous utilisez dans votre projet IronPDF, tel que A4 ou Letter.
Sous le menu déroulant Margins, sélectionnez Custom et définissez les quatre côtés sur une marge de (1") un pouce.
Activez la case à cocher Background Graphics.
Assurez-vous de définir votre Layout sur Landscape si vous souhaitez générer un document en mode 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. Mise en place d'IronPDF

3a.

Définir le type de média CSS dans IronPDF

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

Rappelez-vous que PdfCssMediaType.Screen inclut les arrière-plans et les images plus grandes qui peuvent être omises dans le format PdfCssMediaType.Print, qui est le format par défaut et conçu pour les imprimantes afin d'économiser de 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.

Réglage approprié du délai de rendu et du délai d'attente de rendu

Le délai de rendu par défaut d'IronPDF est de 60 secondes. Si le processus de rendu prend plus de temps que cela, une exception de dépassement de délai sera levée. Pour remplacer les paramètres par défaut, vous devez ajuster l'option RenderingOptions.Timeout. La valeur du délai de rendu, quant à elle, est le temps qu'IronPDF doit attendre avant de commencer le rendu. Ce temps d'attente est essentiel pour que les éléments tels que les images, les polices et le code JavaScript s'exécutent correctement.

N'oubliez pas que le fait de ne pas définir de délai d'attente ou d'avoir un délai de rendu plus long que votre délai d'attente défini produira une exception "Unable to Render PDF". Par conséquent, si vous rencontrez cette erreur, il se peut que vous deviez augmenter ces valeurs.

: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

Chaknith Bin

Discutez avec l'équipe d'ingénierie maintenant

Ingénieur logiciel

Chaknith travaille sur IronXL et IronBarcode. Il possède une expertise approfondie en C# et .NET, aidant à améliorer le logiciel et à soutenir les clients. Ses idées issues des interactions avec les utilisateurs contribuent à de meilleurs produits, une documentation améliorée et une expérience globale enrichie.