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 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 "HTML to 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 quecomparaison wkhtmltopdf en C#.
IronPDF comparé à ses concurrents
Pour une liste complète des comparaisons avec d'autres produits, voir notreblog de comparaison.
Caractéristiques des bibliothèques IronSoftware Utilisation du moteur de rendu Chrome d'IronPDF Analyse Aspose vs IronPDF comparaison entre iText et 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 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 des médias : Print (par défaut) et Screen. Pour une comparaison visuelle côte à côte, voirla fin de cette section. Dans la section "Comparaison de l'écran et de l'exemple d'impression".
CssMediaType.Printest 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.Screenest 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/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 ScreenRé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
Screendemande à 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", alors qu'elles 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 obtenir des PDF parfaits au pixel près, incluant toutes les images, les icônes et les 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, dans Chromeouvrir DevTools dans Chrome.
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 sur les paramètres de rendu
- Naviguez vers le bas et trouvez la liste déroulante pour
Emulate CSS mediaet choisissez l'optionScreenouPrint. 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, ouLetter. - 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
LayoutsurLandscapesi 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/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 = True3b.
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.
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/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); // millisecondsIRON VB CONVERTER ERROR developers@ironsoftware.com
