Desalinhamento de Cabeçalho e Conteúdo
Ao renderizar HTML para PDF, o cabeçalho e o rodapé podem ficar alinhados à borda da página enquanto o conteúdo do corpo é empurrado para dentro, mais visivelmente ao longo das margens esquerda e direita. Isso acontece mesmo com MarginLeft = 0 definido e UseMarginsOnHeaderAndFooter habilitado.
A causa é o estilo padrão do Chrome. Seu mecanismo de renderização aplica uma margem de 8 pixels ao elemento <body> de cada página. Esse padrão é bom para conteúdo da web normal, mas deixa uma lacuna visível de 8px entre seu conteúdo e a borda do PDF, independentemente do MarginLeft = 0 que você passar para ChromePdfRenderer.RenderingOptions. O cabeçalho e o rodapé não são afetados: com margens definidas para 0, eles se alinham diretamente à borda da página, conforme esperado, então apenas o corpo se desalinha.
Este trecho reproduz a discrepância:
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>")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>")
Solução
Substitua a margem padrão <body> do Chrome para que o conteúdo se alinhe com o cabeçalho e o rodapé em toda a largura da página. Aplique margens negativas para cancelar o deslocamento embutido de 8px:
body {
margin-left: -8px;
margin-right: -8px;
}Os valores negativos neutralizam o preenchimento padrão do Chrome para que o cabeçalho, corpo e rodapé se alinhem à mesma borda. Aplicado inline, a renderização corrigida se parece com isto:
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 marginvar 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 marginDim renderer = 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 marginDim renderer = 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
Dicas de Depuração
- Prefira uma lousa limpa: em vez de margens negativas, aplique um reset CSS ou defina
margin: 0explicitamente no elemento<body>para remover o deslocamento padrão na origem. - Escopo do comportamento: o intervalo de 8px aparece sempre que o HTML é renderizado por meio do Chrome sem cabeça, incluindo IronPDF, Puppeteer e o Chrome DevTools Protocol, portanto, a mesma correção se aplica a essas ferramentas.
Curtis Chau é bacharel em Ciência da Computação (Universidade Carleton) e se especializa em desenvolvimento front-end, com experiência em Node.js, TypeScript, JavaScript e React. Apaixonado por criar interfaces de usuário intuitivas e esteticamente agradáveis, Curtis gosta de trabalhar com frameworks modernos e criar manuais bem estruturados e visualmente atraentes.
