Zarządzanie nagłówkami, stopkami i podziałami stron w plikach PDF

Zaktualizowano:10 września, 2025

Translated

View the article in English

Podziały stron mogą być mylące.

Reguła CSS page-break-after zawsze będzie działała, jeżeli zostanie zastosowana poprawnie. Jednak ta reguła nie będzie działać, jeżeli Twój arkusz stylów zmienia div z display:block. Upewnij się, że reguła page-break-after zostaje zastosowana do elementu blokowego, najlepiej div, który jest bezpośrednim dzieckiem znacznika body.

Poniższy przykład HTML demonstruje:

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

Jeśli potrzebujesz powtarzających się nagłówków i stopek tabeli na każdej stronie PDF, zapoznaj się z tym artykułem: Dodaj lub unikaj podziałów stron w HTML PDF

Jeśli powyższe kroki nie rozwiązują Twojego problemu, spróbuj następujących kroków:

1. Uprość problem

Jeśli Twoja treść zróżnicowana jest pod względem długości, przetestuj treści różnej długości, aby upewnić się, że używasz właściwego HTML/CSS. Możesz użyć tego narzędzia do pomocy.

2. Zweryfikuj swój HTML i CSS

Validator CSS może zostać użyty do sprawdzenia stylu użytego w CSS.

Validator HTML może pomóc Ci w weryfikacji twojego wejścia HTML.

Dodatkowo, możesz poprosić swojego projektanta o sprawdzenie HTML, śledząc zmiany.

Z drugiej strony, na pozycjonowanie sekcji ujawnienia wpływa wiele czynników, w tym struktura tabeli, tfoot i wiele innych. Podwójne sprawdzenie ciągu i struktury HTML z pewnością pomoże.

3. Sprawdź wynik w podglądzie drukowania Chrome

IronPDF wygeneruje identyczny PDF jak przeglądarka Chrome na pulpicie, dzięki użyciu silnika renderowania PDF Chrome w IronPDF.

Dlatego możesz sprawdzić wygląd swojego HTML za pomocą podglądu drukowania Chrome i odpowiednio dostosować HTML. Może to wymagać metody prób i błędów, ale jest to najłatwiejszy sposób na debugowanie HTML.

Dowiedz się, jak debugować swój HTML przez podgląd drukowania Chrome: Formatowanie HTML pixel perfect

Zapoznaj się z tym artykułem, aby uzyskać więcej informacji na temat silnika renderowania PDF Chrome: Czym jest Chrome Renderer IronPDF?

4. Użyj narzędzi deweloperskich Chrome

Możesz również użyć Inspect w narzędziach deweloperskich Chrome, aby wyszukać obliczone końcowe CSS w elementach. To dostarczy więcej szczegółowych informacji o każdym elemencie HTML w ciągu.

5. Renderuj HTML używając IronPDF

Wyślij swój ostateczny ciąg HTML lub plik HTML do IronPDF Chrome Renderer i użyj metody RenderHtmlAsPdf() lub RenderHtmlFileAsPdf(), aby utworzyć swój dokument PDF.

Może być konieczne określenie niektórych opcji renderowania dla renderer'a, aby doprecyzować wynikowy plik PDF oraz operacje renderowania. Zobacz ten artykuł, aby dowiedzieć się więcej.

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 18,135,201 | Wersja: 2026.4 just released