Alignement de l'en-tête et du contenu
Lors de la conversion de HTML en PDF, l'en-tête et le pied de page peuvent s'aligner au bord de la page tandis que le contenu du corps est repoussé vers l'intérieur, surtout visible le long des marges gauche et droite. Cela se produit même avec MarginLeft = 0 défini et UseMarginsOnHeaderAndFooter activé.
La cause est le style par défaut de Chrome. Son moteur de rendu applique une marge de 8 pixels à l'élément <body> de chaque page. Ce paramètre par défaut convient pour le contenu web normal, mais il laisse un espace visible de 8px entre votre contenu et le bord du PDF, peu importe le MarginLeft = 0 que vous transmettez à ChromePdfRenderer.RenderingOptions. L'en-tête et le pied de page ne sont pas affectés : avec les marges définies sur 0, ils s'alignent directement au bord de la page comme prévu, donc seul le corps se déplace hors ligne.
Ce segment reproduit la désynchronisation :
var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
HtmlFragment = "<h1>This is header</h1>"
};
renderer.RenderingOptions.MarginLeft = 0;
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left;
var pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");
Solution
Surcharger la marge par défaut de Chrome <body> pour que le contenu soit aligné avec l'en-tête et le pied de page sur toute la largeur de la page. Appliquez des marges négatives pour annuler le décalage intégré de 8px :
body {
margin-left: -8px;
margin-right: -8px;
}Les valeurs négatives neutralisent le padding par défaut de Chrome pour que l'en-tête, le corps et le pied de page s'alignent tous au même bord. Appliqué en ligne, le rendu corrigé ressemble à ceci :
var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
HtmlFragment = "<h1>This is header</h1>"
};
renderer.RenderingOptions.MarginLeft = 0;
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left;
var pdf = renderer.RenderHtmlAsPdf("<h1 style=\"margin-left: -8;\">Hello World</h1>"); //adjust margin left to -8 px to cancel out default Chrome margin
Conseils de débogage
- Préférez une feuille blanche : au lieu de marges négatives, appliquez une réinitialisation CSS ou définissez
margin: 0explicitement sur l'élément<body>pour supprimer le décalage par défaut à la source. - Portée du comportement : l'espace de 8px apparaît chaque fois que le HTML est rendu via Chrome sans tête, y compris IronPDF, Puppeteer, et le protocole Chrome DevTools, donc la même solution s'applique à ces outils.
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 et créer des manuels bien structurés et visuellement attrayants.
