How to HTML To PDF Headers Footers
Headers and footers in HTML-to-PDF conversion add running elements to every page — page numbers, document titles, dates, and company logos. Unlike manually editing a finished PDF, API-based headers and footers are defined in your template and rendered automatically during generation. SublimePDF supports both CSS-based running headers and Chromium's native header/footer templates with dynamic variables.
Follow the step-by-step instructions below, then use the free tool directly — no registration or download required.
Open Tool →How to HTML To PDF Headers Footers — Step by Step
Use the headerTemplate and footerTemplate options
Pass 'headerTemplate' and 'footerTemplate' HTML strings in your API request options. These templates are injected into every page's header and footer areas. Example: "footerTemplate": "<div style='font-size:10px; text-align:center; width:100%;'><span class='pageNumber'></span> of <span class='totalPages'></span></div>".
Enable displayHeaderFooter
Set "displayHeaderFooter": true in the options object. Without this flag, headerTemplate and footerTemplate are ignored even if provided.
Use built-in CSS classes for dynamic content
Chromium's header/footer renderer supports special classes: 'pageNumber' (current page), 'totalPages' (total page count), 'date' (current date), 'title' (document title from <title> tag), and 'url' (source URL). Place <span class='pageNumber'></span> anywhere in your template.
Set margins to accommodate headers and footers
Headers and footers render inside the page margin area. Set "margin": { "top": "80px", "bottom": "60px" } to create enough space. If margins are too small, headers and footers overlap with body content.
Style your header and footer HTML
Apply inline styles directly in the template strings — external stylesheets and <link> tags are not available inside header/footer templates. Use font-size, color, padding, text-align, and borders for layout.
Pro Tips
- 💡 Header and footer templates must be self-contained HTML with inline styles — they cannot reference your main document's CSS classes or external stylesheets.
- 💡 Include images in headers using base64 data URIs: <img src='data:image/png;base64,...' height='30'>. External image URLs may not load reliably in header/footer contexts.
- 💡 Set different header/footer content for the first page by using CSS @page :first { margin-top: 0; } in your body HTML and conditionally hiding the header on page one with JavaScript.
- 💡 If page numbers show '0 of 0', check that displayHeaderFooter is true and that your top/bottom margins are large enough for the header/footer to render visibly.
Privacy & Security
All processing happens directly in your browser. Your files are never uploaded to any server — they remain on your device throughout the entire process. SublimePDF uses WebAssembly technology for fast, secure, client-side processing.
Works Everywhere
This tool works on any modern browser — Chrome, Firefox, Safari, or Edge — on desktop, tablet, or mobile. No software to install. PDF is an open ISO standard supported by all major platforms.
How to HTML To PDF Headers Footers — FAQ
Why are my headers and footers not showing?
Can I use different headers on odd and even pages?
How do I add a horizontal line below the header?
Can I include the document title dynamically?
Related Guides
How to Convert HTML To PDF
Converting HTML to PDF is a core workflow for developers, marketers, and anyone who needs a permanent, printable snapshot of web content. Whether you're archiving a webpage, generating reports from a web app, saving receipts from online purchases, or creating documentation from HTML templates, PDF conversion captures the visual layout, links, and styling in a portable format.
How to HTML To PDF Css Guide
CSS controls how your HTML-to-PDF output looks — page margins, fonts, and print-specific layouts. SublimePDF uses Chromium rendering, so standard CSS works plus @page rules for PDF control. Mastering print CSS lets you create pixel-perfect invoices, reports, and documents that look identical on screen and in the generated PDF.
How to HTML To PDF Fonts Guide
Typography makes or breaks PDF quality. SublimePDF's Chromium renderer supports web fonts, system fonts, and embedded fonts so your generated PDFs match your brand's typeface exactly. This guide covers loading custom fonts, handling fallbacks, and avoiding common rendering issues like missing glyphs, font substitution, and blurry text.