Add HTML Headers & Footers

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.

const {PdfDocument} = require("@ironsoftware/ironpdf");

(async () => {
    // Configure render options
    const renderOptions = {
        firstPageNumber: 1, // Use 2 if a cover page will be appended

        // Build a footer using html to style the text
        // mergeable fields are:
        // {page} {total-pages} {url} {date} {time} {html-title} & {pdf-title}
        htmlFooter: {
            maxHeight: 15, //millimeters
            htmlFragment: "<center><i>{page} of {total-pages}<i></center>",
            dividerLine: true,
        },

        // Build a header using an image asset
        htmlHeader: {
            maxHeight: 15, //millimeters
            htmlFragment: "<img src='logo.png'>",
        },

        // Use sufficient MarginBottom to ensure that the HtmlFooter does not overlap with the main PDF page content.
        margin: {
            top: 25, // Create 25mm space for the header
            bottom: 25, // Create 25mm space for the footer
        },
    };
})();

Add HTML Headers & Footers

Configure the rendering options to include an HTML header and footer when rendering a PDF document.

Define the header content with a divider line, HTML fragment, and specify the maximum height of the header. Similarly, define the footer with the htmlHeader property.

Note that the height of the header and footer is not automatically detected, which means they might overlap with the main HTML content. Customize the margins to ensure the header and footer are appropriately positioned.