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

Zaktualizowano:23 kwietnia, 2026

Translated

View the article in English

Podzialy stron mogą być mylace.

Reguła CSS page-break-after będzie zawsze działać, jeśli zostanie poprawnie zastosowana. Jednak ta reguła nie zadziała, jeśli arkusz stylów zmieni div na display:block. Upewnij się, że reguła page-break-after jest zastosowana do elementu blokowego, najlepiej div, który jest bezpośrednim elementem potomnym tagu 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żeli zamiast tego potrzebujesz powtarzalnych nagłówków i stopek tabel na każdej stronie PDF, zapoznaj się z tym artykułem: Dodaj lub unikaj podziałów strony w HTML PDF

Jeśli powyzsze kroki nie rozwiązuja Twojego problemu, sproboj następujących krokow:

1. Uprosc problem

Jeśli Twoja treść zroznicowana jest pod wzgledem dlugosci, przetestuj treści różnej dlugosci, aby upewnic sie, ze używasz wlasciwego HTML/CSS. Możesz uzyc tego narzędzia do pomocy.

2. Zweryfikuj swoj HTML i CSS

Validator CSS może zostac uzyty do sprawdzenia stylu uzytego w CSS.

Validator HTML może pomoc Ci w weryfikacji twojego wejscia HTML.

Dodatkowo, możesz poprosic swojego projektanta o sprawdzenie HTML, sledzac zmiany.

Z drugiej strony na pozycjonowanie sekcji ujawniania informacji wpływa wiele czynników, w tym struktura tabeli, tfoot i wiele innych. Podwojne sprawdzenie ciągu i struktury HTML z pewnoscia pomoże.

3. Sprawdz wynik w podgladzie 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 sprawdzic wyglad swojego HTML za pomoca podgladu drukowania Chrome i odpowiednio dostosować HTML. Może to wymagac metody prób i błędów, ale jest to najłatwiejszy sposob na debugowanie HTML.

Dowiedz sie, jak debugowac swoj HTML przez podglad drukowania Chrome: Formatowanie HTML pixel perfect

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

4. Uzyj narzędzi deweloperskich Chrome

Możesz również uzyc Inspect w narzędziach deweloperskich Chrome, aby wyszukac obliczone koncowe CSS w elementach. To dostarczy więcej szczegółowych informacji o kazdym elemencie HTML w ciągu.

5. Renderuj HTML używając IronPDF

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

Może być konieczne okreslenie niektorych opcji renderowania dla renderer'a, aby doprecyzowac wynikowy plik PDF oraz operacje renderowania. Zobacz ten artykuł, aby dowiedziec sie 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,926,724 | Wersja: 2026.5 just released