Fehlausrichtung von Kopfzeile und Inhalt
Beim Rendern von HTML zu PDF können Header und Footer bündig mit dem Seitenrand laufen, während der Hauptinhalt nach innen gedrängt wird, am sichtbarsten entlang der linken und rechten Ränder. Dies passiert auch, wenn MarginLeft = 0 gesetzt und UseMarginsOnHeaderAndFooter aktiviert ist.
Die Ursache ist das Standardstil von Chrome. Sein Rendering-Engine wendet an jedem Seiten-<body>-Element einen Rand von 8 Pixel an. Dieser Standard ist für normale Webinhalte in Ordnung, aber er lässt einen sichtbaren Abstand von 8px zwischen Ihrem Inhalt und dem Rand des PDFs, unabhängig von dem MarginLeft = 0, das Sie an ChromePdfRenderer.RenderingOptions übergeben. Der Kopf- und Fußbereich sind unverändert: mit Rändern, die auf 0 gesetzt sind, passen sie sich direkt an den Seitenrand an, wie erwartet, sodass sich nur der Hauptteil aus der Linie bewegt.
Dieser Ausschnitt reproduziert die Diskrepanz:
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>");
Lösung
Überschreiben Sie den Standardrand <body> von Chrome, damit der Inhalt mit dem Kopf- und Fußbereich über die gesamte Seitenbreite übereinstimmt. Wenden Sie negative Ränder an, um die integrierte 8px-Versatz zu neutralisieren:
body {
margin-left: -8px;
margin-right: -8px;
}Die negativen Werte neutralisieren das Standard-Padding von Chrome, sodass Header, Hauptinhalt und Footer alle an der gleichen Linie ausgerichtet sind. Inline angewendet sieht das korrigierte Rendering so aus:
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
Debug-Tipps
- Eine saubere Ausgangsbasis bevorzugen: anstatt negativer Ränder wenden Sie einen CSS-Reset an oder setzen Sie
margin: 0explizit auf dem<body>-Element, um den Standardversatz an der Quelle zu entfernen. - Geltungsbereich des Verhaltens: Der 8px Abstand tritt auf, wann immer HTML über Headless Chrome gerendert wird, einschließlich IronPDF, Puppeteer und dem Chrome DevTools Protokoll, daher gilt die gleiche Korrektur für diese Werkzeuge.
Curtis Chau hat einen Bachelor-Abschluss in Informatik von der Carleton University und ist spezialisiert auf Frontend-Entwicklung mit Expertise in Node.js, TypeScript, JavaScript und React. Leidenschaftlich widmet er sich der Erstellung intuitiver und ästhetisch ansprechender Benutzerschnittstellen und arbeitet gerne mit modernen Frameworks sowie der Erstellung gut strukturierter, optisch ansprechender Handbücher.
