Add HTML Headers & Footers

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 with IronPDF, a library by Iron Software that allows for advanced PDF generation and manipulation.

Define the header content with a divider line, an HTML fragment, and specify the maximum height of the header using IronPDF's flexible PDF rendering tools. Similarly, define the footer content using the htmlHeader property provided by IronPDF.

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.

For more details on how to implement headers, footers, or to explore other features, visit the IronPDF Official Website.

using IronPdf;

class Program
{
    static void Main()
    {
        // Create a Renderer object for PDF creation
        var renderer = new HtmlToPdf();

        // Define the header content including an HTML fragment
        string htmlHeader = "<div style='width:100%; border-bottom:1px solid black; text-align:center;'>Header Content</div>";

        // Define the footer content including an HTML fragment
        string htmlFooter = "<div style='width:100%; border-top:1px solid black; text-align:center;'>Footer Content</div>";

        // Configure the header and footer with desired heights
        renderer.PrintOptions.Header = new SimpleHeaderFooter()
        {
            HtmlFragment = htmlHeader,
            MaxHeight = 50  // Set the maximum height of the header
        };

        renderer.PrintOptions.Footer = new SimpleHeaderFooter()
        {
            HtmlFragment = htmlFooter,
            MaxHeight = 50  // Set the maximum height of the footer
        };

        // Customize page margins to prevent overlap of the header/footer with content
        renderer.PrintOptions.MarginTop = 60;   // Margin to accommodate the header
        renderer.PrintOptions.MarginBottom = 60; // Margin to accommodate the footer

        // Render HTML to PDF
        var pdf = renderer.RenderHtmlAsPdf("<h1>Main Content</h1><p>This is some example content.</p>");

        // Save the PDF file
        pdf.SaveAs("output.pdf");
    }
}

using IronPdf;

class Program
{
    static void Main()
    {
        // Create a Renderer object for PDF creation
        var renderer = new HtmlToPdf();

        // Define the header content including an HTML fragment
        string htmlHeader = "<div style='width:100%; border-bottom:1px solid black; text-align:center;'>Header Content</div>";

        // Define the footer content including an HTML fragment
        string htmlFooter = "<div style='width:100%; border-top:1px solid black; text-align:center;'>Footer Content</div>";

        // Configure the header and footer with desired heights
        renderer.PrintOptions.Header = new SimpleHeaderFooter()
        {
            HtmlFragment = htmlHeader,
            MaxHeight = 50  // Set the maximum height of the header
        };

        renderer.PrintOptions.Footer = new SimpleHeaderFooter()
        {
            HtmlFragment = htmlFooter,
            MaxHeight = 50  // Set the maximum height of the footer
        };

        // Customize page margins to prevent overlap of the header/footer with content
        renderer.PrintOptions.MarginTop = 60;   // Margin to accommodate the header
        renderer.PrintOptions.MarginBottom = 60; // Margin to accommodate the footer

        // Render HTML to PDF
        var pdf = renderer.RenderHtmlAsPdf("<h1>Main Content</h1><p>This is some example content.</p>");

        // Save the PDF file
        pdf.SaveAs("output.pdf");
    }
}

Imports IronPdf

Friend Class Program
	Shared Sub Main()
		' Create a Renderer object for PDF creation
		Dim renderer = New HtmlToPdf()

		' Define the header content including an HTML fragment
		Dim htmlHeader As String = "<div style='width:100%; border-bottom:1px solid black; text-align:center;'>Header Content</div>"

		' Define the footer content including an HTML fragment
		Dim htmlFooter As String = "<div style='width:100%; border-top:1px solid black; text-align:center;'>Footer Content</div>"

		' Configure the header and footer with desired heights
		renderer.PrintOptions.Header = New SimpleHeaderFooter() With {
			.HtmlFragment = htmlHeader,
			.MaxHeight = 50
		}

		renderer.PrintOptions.Footer = New SimpleHeaderFooter() With {
			.HtmlFragment = htmlFooter,
			.MaxHeight = 50
		}

		' Customize page margins to prevent overlap of the header/footer with content
		renderer.PrintOptions.MarginTop = 60 ' Margin to accommodate the header
		renderer.PrintOptions.MarginBottom = 60 ' Margin to accommodate the footer

		' Render HTML to PDF
		Dim pdf = renderer.RenderHtmlAsPdf("<h1>Main Content</h1><p>This is some example content.</p>")

		' Save the PDF file
		pdf.SaveAs("output.pdf")
	End Sub
End Class

$vbLabelText $csharpLabel

Discover in-depth examples on adding HTML Headers & Footers with IronPDF for Node.js!