Page Numbers and Page Breaks

Screen: Indicates that CSS rules are intended for on-screen viewing. Styles are optimized for digital screens, which typically include considerations like colors and layouts that look good on computer monitors.
Print: Instructs the browser to apply styles tailored for printed documents. This means the CSS rules are optimized for printing, ensuring readability and proper formatting when the HTML content is printed on physical media, like paper.

import {PdfDocument} from "@ironsoftware/ironpdf";

(async () => {
    const html = `
        <p> Hello Iron</p>
        <p> This is 1st Page </p>
        <div style='page-break-after: always;'></div>
        <p> This is 2nd Page</p>
        <div style='page-break-after: always;'></div>
        <p> This is 3rd Page</p>
    `;

    // Configure render options
    const options = {
        htmlHeader: {
            htmlFragment: "<center><i>{page} of {total-pages}<i></center>",
            dividerLine: true,
            maxHeight: 15,
        }
    };

    const pdf = await PdfDocument.fromHtml(html, {renderOptions: options});

    // Save the PDF
    await pdf.saveAs("pageNumber.pdf");
})();

Page Numbers and Page Breaks

Page breaks in HTML work perfectly when rendering to PDF using IronPDF.

In HTML, a page break is a marker or instruction that tells a web browser or a rendering engine to start a new page when displaying or printing content. Page breaks are typically used when you want to control the layout of printed documents or ensure that certain content starts on a fresh page.

Furthermore, the code above configures rendering options to include the page number at the bottom center of the PDF document. The page number is displayed in the format "{page} of {total-pages}" and is limited to a maximum height of 15 units.