1. IronPDF
  2. Solução de problemas
  3. Cabeçalhos/Rodapés e Quebras de Página

Gerenciando cabeçalhos, rodapés e quebras de página em PDFs

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

As quebras de página podem ser confusas.

A regra CSS page-break-after sempre funcionará se aplicada corretamente. No entanto, essa regra não funcionará se sua folha de estilo alterar um div de display:block. Certifique-se de que a regra page-break-after seja aplicada a um elemento de nível de bloco, de preferência um div que seja filho direto da tag body.

O exemplo em HTML abaixo demonstra:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Page Breaks with Header and Footer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header, footer {
            position: fixed;
            width: 100%;
            text-align: center;
            background-color: #f1f1f1;
            padding: 10px 0;
        }
        header {
            top: 0;
        }
        footer {
            bottom: 0;
        }
        .content {
            margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */
        }
        .page-break {
            page-break-after: always;
            display: block; /* Ensure it remains a block-level element */
        }
    </style>
</head>
<body>
    <header>
        <h1>Document Title</h1>
        <p>Header Content</p>
    </header>
    <footer>
        <p>Footer Content</p>
    </footer>
    <div class="content">
        <div class="page-break">
            <h2>Section 1</h2>
            <p>This is the first section. After this section, there will be a page break.</p>
        </div>
        <div class="page-break">
            <h2>Section 2</h2>
            <p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p>
        </div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Page Breaks with Header and Footer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header, footer {
            position: fixed;
            width: 100%;
            text-align: center;
            background-color: #f1f1f1;
            padding: 10px 0;
        }
        header {
            top: 0;
        }
        footer {
            bottom: 0;
        }
        .content {
            margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */
        }
        .page-break {
            page-break-after: always;
            display: block; /* Ensure it remains a block-level element */
        }
    </style>
</head>
<body>
    <header>
        <h1>Document Title</h1>
        <p>Header Content</p>
    </header>
    <footer>
        <p>Footer Content</p>
    </footer>
    <div class="content">
        <div class="page-break">
            <h2>Section 1</h2>
            <p>This is the first section. After this section, there will be a page break.</p>
        </div>
        <div class="page-break">
            <h2>Section 2</h2>
            <p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p>
        </div>
    </div>
</body>
</html>
HTML

Se você precisar que os cabeçalhos e rodapés das tabelas se repitam em todas as páginas do PDF, confira este artigo: Adicionar ou evitar quebras de página em PDFs HTML.

Se as etapas acima não resolverem o seu problema, tente o seguinte:

1. Simplifique a questão

Se o seu conteúdo tiver comprimentos variáveis, teste-o com diferentes versões para garantir que está usando o HTML/CSS correto. Esta ferramenta pode ser usada como auxílio.

2. Valide seu HTML e CSS

O Validador CSS pode ser usado para verificar o estilo CSS utilizado.

O Validador HTML pode ser usado para auxiliar na validação da sua entrada de HTML.

Além disso, você pode pedir ao seu web designer para verificar seu HTML e acompanhar as alterações.

Por outro lado, o posicionamento da seção de divulgação é afetado por muitos fatores, incluindo a estrutura da tabela, tfoot, e muitos outros. Portanto, verificar novamente sua string e estrutura HTML certamente ajudará.

3. Verifique a saída na Visualização de Impressão do Chrome.

O IronPDF irá gerar um PDF idêntico no navegador Chrome para desktop, graças ao uso do mecanismo de renderização de PDF do Chrome presente no IronPDF.

Portanto, você pode verificar a aparência do seu HTML através da Pré-visualização de Impressão do Chrome e ajustar o HTML conforme necessário. Isso pode exigir algumas tentativas, mas é a maneira mais fácil de depurar seu HTML.

Saiba mais sobre como depurar seu HTML usando a Visualização de Impressão do Chrome: Formatação HTML perfeita em pixels

Confira este artigo para obter mais informações sobre o mecanismo de renderização de PDF do Chrome: O que é o renderizador do Chrome da IronPDF?

4. Utilize as ferramentas de desenvolvedor do Chrome.

Alternativamente, você pode usar a opção Inspecionar nas ferramentas de desenvolvedor do Chrome para procurar CSS final calculado nos elementos. Isso fornecerá mais detalhes sobre cada elemento HTML presente na string.

5. Renderize o HTML usando o IronPDF

Envie sua string HTML finalizada ou arquivo HTML para o IronPDF Chrome Renderer e use o método RenderHtmlAsPdf() ou RenderHtmlFileAsPdf() para criar seu documento PDF.

Você pode precisar especificar algumas opções de renderização para o renderizador a fim de ajustar o PDF de saída, bem como a operação de renderização. Consulte este artigo para saber mais.

Curtis Chau
Curtis Chau
  Converse agora mesmo com a equipe de engenharia.
Redator Técnico

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

Leia mais
Pronto para começar?
Nuget Downloads 18,318,263 | Versão: 2026.4 acaba de ser lançado
Still Scrolling Icon

Ainda está rolando a tela?

Quer provas rápidas? PM > Install-Package IronPdf
executar um exemplo Veja seu HTML se transformar em um PDF.