Niepowiązanie nagłówka i treści

Zaktualizowano:czerwca 28, 2026

Translated

View the article in English

Podczas renderowania HTML na PDF, nagłówek i stopka mogą być dopasowane do krawędzi strony, podczas gdy zawartość ciała jest przesunięta do środka, najbardziej widocznie wzdłuż marginesów lewej i prawej. Dzieje się tak, nawet gdy MarginLeft = 0 jest ustawiony i UseMarginsOnHeaderAndFooter włączony.

Przyczyną jest domyślne stylizowanie Chrome'a. Jego silnik renderujący stosuje 8-pikselowy margines do elementu <body> każdej strony. Ta wartość domyślna jest odpowiednia dla normalnej zawartości internetowej, ale pozostawia widoczną 8px przerwę między zawartością a krawędzią PDF, niezależnie od MarginLeft = 0, który przekazujesz do ChromePdfRenderer.RenderingOptions. Nagłówek i stopka nie są dotknięte: przy marginesach ustawionych na 0 wyrównują się bezpośrednio do krawędzi strony zgodnie z oczekiwaniami, więc tylko korpus jest nie na miejscu.

Ten fragment reprodukuje niezgodność:

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 pokazujący, że nagłówek jest wyrównany do lewej, ale zawartość ciała jest przesunięta do środka

Rozwiązanie

Zastąp domyślny margines <body> Chrome, aby zawartość wyrównała się z nagłówkiem i stopką na całej szerokości strony. Zastosuj ujemne marginesy, aby anulować wbudowany 8-pikselowy przesunięcie:

body {
margin-left: -8px;
margin-right: -8px;
}

Ujemne wartości neutralizują domyślne dopełnienia Chrome, dzięki czemu nagłówek, ciało i stopka wszystkie są wyrównane do tej samej krawędzi. Zastosowane inline, poprawione renderowanie wygląda tak:

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

PDF pokazujący, że nagłówek i zawartość ciała są wyrównane do tej samej lewej krawędzi po naprawie

Wskazówki dotyczące debugowania

Preferuj czysty start: zamiast negatywnych marginesów, zastosuj reset CSS lub ustaw margin: 0 jawnie na elemencie <body>, aby usunąć domyślną przesunięcie u źródła.
Zakres zachowania: przerwa 8 pikseli pojawia się, gdy HTML jest renderowany przez headless Chrome, w tym IronPDF, Puppeteer, oraz Chrome DevTools Protocol, więc to samo rozwiązanie ma zastosowanie w tych narzędziach.

Curtis Chau

Czat z zespołem inżynierów teraz

Autor tekstów technicznych

Curtis Chau posiada tytuł licencjata z informatyki (Uniwersytet Carleton) i specjalizuje się w front-endowym rozwoju, z ekspertką w Node.js, TypeScript, JavaScript i React. Pasjonuje się tworzeniem intuicyjnych i estetycznie przyjemnych interfejsów użytkownika, Curtis cieszy się pracą z nowoczesnymi frameworkami i tworzeniem dobrze zorganizowanych, atrakcyjnych wizualnie podrę...

Czytaj więcej

Gotowy, aby rozpocząć?

Nuget Pliki do pobrania 20,296,129 | Wersja: 2026.7 właśnie wydany