Add Classic Text Headers & Footers

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

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

        // Add a header to every page
        textHeader: {
            dividerLine: true,
            centerText: "{html-title}",
            font: AffixFonts.Helvetica, // Use the font name or font file path
            fontSize: 12,
        },

        // Add a footer
        textFooter: {
            dividerLine: true,
            leftText: "{date} {time}",
            rightText: "{page} of {total-pages}",
            font: AffixFonts.Arial, // Use the font name or font file path
            fontSize: 10,
        },
        // Mergeable fields are: {page} {total-pages} {url} {date} {time} {html-title} & {pdf-title}

        margin: {
            top: 25, // Create 25mm space for the header
            bottom: 25, // Create 25mm space for the footer
        },
    };

    // Define HTML content
    const htmlContent = "<h1>Hello IronPDF</h1>";

    // Render HTML content to a PDF with headers and footers
    const pdf = await PdfDocument.fromHtml(htmlContent, {renderOptions: options });

    // Save the PDF with headers and footers
    await pdf.saveAs("header_footer.pdf");
})();

npm i @ironsoftware/ironpdf

npm i @ironsoftware/ironpdf

Add Classic Text Headers & Footers

Learn how to add text headers and footers to a PDF document when rendering HTML content.

To include text headers and footers, you need to specify them in the rendering options object. Define the header content with a divider line, centered text displaying the HTML title, font settings, and font size. Similarly, define the footer with the textFooter property. You can utilize fields like {page}, {total-pages}, {url}, {date}, {time}, {html-title}, and {pdf-title} to personalize the content.

Customize margins to accommodate the header and footer appropriately.

Utilize the PdfDocument.fromHtml method to convert your HTML content into a PDF. Pass the renderOptions object as an option.

For detailed documentation on creating PDFs from HTML, visit the IronPDF Documentation.

The resulting PDF document, complete with headers and footers, is saved under the name "header_footer.pdf."

Explore Headers & Footers Example Code on GitHub

View on GitHub