1. IronPDF
  2. Fehlersuche
  3. Header- und Inhaltsverschiebung

Fehlausrichtung von Kopfzeile und Inhalt

Curtis Chau
Curtis Chau
Aktualisiert:
This article was translated from English: Does it need improvement?
Translated
View the article in English

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>");
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>");
Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.HtmlHeader = New HtmlHeaderFooter() With {
    .HtmlFragment = "<h1>This is header</h1>"
}
renderer.RenderingOptions.MarginLeft = 0
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left
Dim pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>")
$vbLabelText   $csharpLabel

PDF zeigt den Header links bündig an, aber der Hauptinhalt ist nach innen fehlplatziert

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
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
Imports System

Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.HtmlHeader = New HtmlHeaderFooter() With {
    .HtmlFragment = "<h1>This is header</h1>"
}
renderer.RenderingOptions.MarginLeft = 0
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left
Dim pdf = renderer.RenderHtmlAsPdf("<h1 style=""margin-left: -8;"">Hello World</h1>") 'adjust margin left to -8 px to cancel out default Chrome margin
$vbLabelText   $csharpLabel

Das PDF zeigt Kopf- und Hauptinhalt, die nach der Korrektur am selben linken Rand ausgerichtet sind

Debug-Tipps

  • Eine saubere Ausgangsbasis bevorzugen: anstatt negativer Ränder wenden Sie einen CSS-Reset an oder setzen Sie margin: 0 explizit 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
Curtis Chau
  Jetzt mit dem Ingenieurteam chatten
Technischer Autor

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 ...

Weiterlesen
Bereit anzufangen?
Nuget Downloads 20,296,129 | Version: 2026.7 gerade veröffentlicht
Still Scrolling Icon

Scrollst du immer noch?

Sie brauchen schnell einen Beweis? PM > Install-Package IronPdf
Führen Sie eine Probe aus Sehen Sie zu, wie Ihr HTML-Code in eine PDF-Datei umgewandelt wird.