1. IronPDF
2. Tutoriels
3. Déboguer le HTML avec Chrome

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

En tant que développeurs d'IronPDF, nous comprenons que les documents PDF créés par IronPDF ne doivent pas seulement être parfaits, mais aussi ressembler exactement à ce que nos clients attendent d'eux. Pour que vos PDF soient parfaits comme des pixels, 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 nécessaires pour rendre vos PDF Pixel Perfect à votre HTML et pour qu'ils apparaissent identiques à la façon dont ils apparaissent 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 tutoriel, nous allons vous guider à travers certains paramètres que vous devrez appliquer dans Chrome et dans IronPDF pour y parvenir.

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

IronPDF comparé à ses concurrents

IronPDF

Télécharger le PDF

Chrome Vanille

Télécharger le PDF

Aspose.PDF

Télécharger le PDF

iText

Télécharger le PDF

wkhtmltopdf

Télécharger le PDF

Pour une liste complète des comparaisons avec d'autres produits, voir notreblog.

Caractéristiques Le moteur de rendu Chrome d'IronPDF Aspose vs IronPDF 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 :

Autre exemple de texte coupé dans Chrome :

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 normalisées et bien documentées.

• La mise en page et la conception du produit 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 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 des médias : Print (par défaut) et Screen. Pour une comparaison visuelle côte à côte, voir la fin de ce tutoriel. 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 s'afficher exactement comme ils apparaissent 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/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

' Pixel Perfect HTML Formatting Settings
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print ' or Screen

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 uniquement utiliser le CssMediaType Print.

• L'utilisation de Screen demande à Chrome de n'imprimer les en-têtes qu'une seule fois.

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

De nombreuses images et icônes ne se chargent pas en mode impression, mais se chargent en mode écran :

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 que les PDF Pixel Perfect incluent toutes les images, les icônes et les arrière-plans qui sont généralement omis lors de l'impression, assurez-vous d'utiliser l'option CSS Media Screen.

2a.

Ouvrez DevTools et paramétrez Enable Emulate CSS media to Screen/Print dans Chrome

1. Pour ce faire, dans Chromeouvrir DevTools.

2. Appuyer sur Commande+Maj+P(Mac) ou Contrôle+Shift+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 votre fenêtre DevTools. (plus d'aide)

   
3. Naviguez vers le bas et trouvez la liste déroulante pour Emulate CSS media et choisissez l'option Screen ou Print. Si vous êtes sur une page web, il se peut que vous deviez la recharger(Ctrl+R) pour que les réglages 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, par exemple A4, ou Letter.
• Dans le menu déroulant "Marges", sélectionnez "Personnalisé" et réglez les quatre côtés sur(1") marge d'un pouce.
• Activez la case à cocher "Graphiques d'arrière-plan".

• Veillez à régler votre Layout sur Landscape si vous avez l'intention de produire un document en format 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.

Rappelons que le format PdfCssMediaType.Screen inclut des arrière-plans et des 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/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;

' Example using PdfCssMediaType.Screen
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen ' or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = True

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. Tout ce qui prend plus de temps à traiter ne sera pas rendu sans modification des options de rendu.

Pour remplacer les paramètres par défaut, vous devez 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" (Impossible de rendre le PDF) se produira Exception. Par conséquent, si vous rencontrez cette erreur, il se peut que vous deviez 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

IRON VB CONVERTER ERROR developers@ironsoftware.com

• RenderDelay et JavaScript (Exemple de code)
• Délai de rendu (Référence API)
• Délai d'attente (Référence API)