Niepowiązanie nagłówka i treści
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>");
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
Wskazówki dotyczące debugowania
- Preferuj czysty start: zamiast negatywnych marginesów, zastosuj reset CSS lub ustaw
margin: 0jawnie 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 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ęczników.
