Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To print a header or footer in a Puppeteer PDF, set displayHeaderFooter: true and pass HTML strings to headerTemplate and/or footerTemplate. Puppeteer fills five documented classes—date, title, url, pageNumber, and totalPages—when Chromium renders the PDF. Reserve space with the PDF’s top and bottom margins, and remember that page.pdf() uses print CSS unless you explicitly emulate screen media.
Minimal working example
Install Puppeteer, create a page, and enable the templates in the same page.pdf() call:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent(`
<main>
<h1>Quarterly report</h1>
<p>Your document content goes here.</p>
</main>
`, { waitUntil: 'networkidle0' });
await page.pdf({
path: 'report.pdf',
format: 'A4',
displayHeaderFooter: true,
headerTemplate: `
<div style="font-size:9px; width:100%; padding:0 24px; color:#555;">
<span class="title"></span>
<span style="float:right" class="date"></span>
</div>`,
footerTemplate: `
<div style="font-size:9px; width:100%; padding:0 24px; color:#555; text-align:center;">
Page <span class="pageNumber"></span>
of <span class="totalPages"></span>
</div>`,
margin: {
top: '60px',
bottom: '50px',
left: '24px',
right: '24px'
}
});
await browser.close();
})();The option defaults to displayHeaderFooter: false, so templates are ignored until you turn it on. Both templates are HTML strings, not selectors pointing at elements in the page body.
Which dynamic values can a template print?
| Class | Value inserted by Chromium | Typical use |
|---|---|---|
date |
Formatted print date | Report generation date |
title |
Document title | Heading or running report name |
url |
Document location | Source URL in audits |
pageNumber |
Current page number | “Page 2” |
totalPages |
Total page count | “of 8” |
Use the class names exactly as shown. Puppeteer replaces their contents during PDF generation. Ordinary page-body selectors, custom class names, or JavaScript that runs after PDF creation do not receive these values automatically.
#1 Best Overall
- 1 ream (500 sheets) of 8.5 x 11 white copier and printer paper for home or office use
- Multipurpose letter size copy paper works with laser/inkjet printers, copiers and fax machines
- Smooth 20lb weight paper for consistent ink and toner distribution; dries quickly and resists paper jams
- Bright white paper (92 GE; 104 Euro) offers great contrast for crisp printing and vivid color
- Virgin copy paper providing professional quality results; acid-free to prevent yellowing
How the page body and templates are rendered
Print media is the default
page.pdf() generates the document with the print CSS media type. Rules inside @media print therefore apply, and screen-only layouts may change. If the PDF should match the screen design, call this before generating it:
await page.emulateMediaType('screen');
await page.pdf({
path: 'screen-styled.pdf',
displayHeaderFooter: true,
headerTemplate: '<div class="title"></div>',
footerTemplate: '<div class="pageNumber"></div>',
margin: { top: '48px', bottom: '40px' }
});Choose one media mode deliberately. Switching to screen affects the body’s responsive and print rules; it does not remove the need to enable header and footer display.
Colors are adjusted for printing
Chromium modifies colors for print output by default. When brand colors or backgrounds must remain exact, add this to the relevant body or component CSS:
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitches* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}Exact color adjustment can increase ink or produce a result that is less printer-friendly, so apply it only where fidelity matters.
Rank #2
- HP Papers is sourced from renewable forest resources and has achieved production with 0% deforestation in North America. Each ream is wrapped in a polyurethane coated paper wrapper to protect the cut sheets from moisture damage
- Sheet size – 8.5 x 11; Thickness – 20 pounds; Brightness – 92 bright white
- HP Copy&Print20 20 pounds printer paper is Forest Stewardship Council (FSC) certified and contributes toward satisfying credit MR1 under LEED (Leadership in Energy and Environmental Design)
- All HP Papers provide premium performance on HP equipment, as well as on all other printer and copier equipment; 100% satisfaction guaranteed; ColorLok technology provides more vivid colors, bolder blacks and faster drying
- Superior quality, reliability, and dependability for high-volume printing at home, at school and in the office; HP Copy&Print20 print and copy paper prevents yellowing over time to ensure a long-lasting appearance for added archival quality
Templates are separate from the document body
Header and footer HTML is repeated by Chromium on each page. It is not part of the page’s normal DOM flow, cannot rely on your body’s layout containers, and should be kept self-contained. Inline styles and simple markup are the most portable choices.
Margins: reserve space for repeating content
The header and footer occupy the margin areas. If the top or bottom margin is smaller than the template’s visual height, the body can appear to collide with it or the template can look clipped. There is no universal pixel value: measure your actual template, then set margin.top and margin.bottom accordingly.
- Start with a margin larger than the template’s font, padding, and line height.
- Use the same units consistently (
px,in,mm, orcm). - Test a one-page document and a document that flows across several pages.
- Include long titles and localized dates in tests; they can wrap and require more height.
Production-ready pattern with loaded content
For a real URL, wait for navigation and any assets before calling page.pdf(). The following example also sets the title used by the title placeholder and preserves screen colors:
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →const puppeteer = require('puppeteer');
async function makePdf(url) {
const browser = await puppeteer.launch({
headless: true
});
try {
const page = await browser.newPage();
await page.goto(url, { waitUntil: 'networkidle0', timeout: 60000 });
await page.emulateMediaType('screen');
await page.addStyleTag({
content: `
@media print {
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
`
});
await page.pdf({
path: 'site-report.pdf',
printBackground: true,
displayHeaderFooter: true,
headerTemplate: `
<div style="font-size:8px; width:100%; margin:0 20px;">
<span class="title"></span>
<span style="float:right" class="url"></span>
</div>`,
footerTemplate: `
<div style="font-size:8px; width:100%; margin:0 20px; text-align:right;">
<span class="date"></span> ·
<span class="pageNumber"></span>/<span class="totalPages"></span>
</div>`,
margin: { top: '52px', bottom: '42px', left: '20px', right: '20px' }
});
} finally {
await browser.close();
}
}
makePdf('https://example.com').catch(console.error);printBackground: true is separate from color adjustment: it asks Puppeteer to include CSS backgrounds, while -webkit-print-color-adjust requests color fidelity.
Rank #3
- 3 ream case (1,500 sheets) of 8.5 x 11 white copier and printer paper for home or office use
- Multipurpose letter size copy paper works with laser/inkjet printers, copiers and fax machines
- Smooth 20lb weight paper for consistent ink and toner distribution; dries quickly and resists paper jams
- Bright white paper (92 GE; 104 Euro) offers great contrast for crisp printing and vivid color
- Virgin copy paper providing professional quality results; acid-free to prevent yellowing
Why a header or footer is not showing
displayHeaderFooter was omitted
This is the most common cause. Set it to true; its default is false.
The placeholder class is wrong
page-number, currentPage, or a body element with the same name will not be substituted. Use the documented camel-case classes: pageNumber and totalPages, along with date, title, and url.
The template is outside the option object
Pass headerTemplate and footerTemplate directly inside the object supplied to page.pdf(). They are not page navigation options and do not belong in goto() or setContent().
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The body overlaps the template
Increase the corresponding top or bottom margin. A large logo, wrapped title, or two-line footer needs more space than a one-line template.
Rank #4
- 5 ream case (2,500 sheets) of 8.5 x 11 white copier and printer paper for home or office use
- Multipurpose letter size copy paper works with laser/inkjet printers, copiers and fax machines
- Smooth 20lb weight paper for consistent ink and toner distribution; dries quickly and resists paper jams
- Bright white paper (92 GE; 104 Euro) offers great contrast for crisp printing and vivid color
- Virgin copy paper providing professional quality results; acid-free to prevent yellowing
Colors or layout differ from the browser
Check the active media type first. Print CSS is the default; call page.emulateMediaType('screen') when screen rules are intended. Then decide whether to enable printBackground and color adjustment.
Assets are missing
Wait for navigation, network idle, or a specific application-ready selector before generating the PDF. A header template cannot repair a body that was captured before its fonts or images loaded.
Testing and reliability checklist
- Generate a short one-page fixture and a multi-page fixture.
- Verify that page numbers increment and total pages are stable.
- Test long titles, URLs, dates, and non-Latin text.
- Check output with both print and screen media if your application supports both.
- Inspect the first and last page for clipping, overlap, and unexpected blank space.
- Pin and recheck your Puppeteer version after upgrades; the PDFOptions reference currently displays version 25.12.0, and option behavior can change between releases.
Performance and operational considerations
Header and footer templates add little work compared with launching Chromium, loading the page, and waiting for assets. Reuse a browser process for batches, create isolated pages per job, and close pages reliably. Set navigation and job timeouts appropriate to your content. For deterministic output, control fonts, locale, timezone, and external network dependencies in your own application; the PDF API itself does not provide a universal rendering benchmark.
Keep templates small. Complex scripts, external stylesheets, and body-only selectors are common sources of inconsistent output because templates are rendered in a separate print context. Prefer inline CSS and static text around the injected classes.
Best Value
- 8 ream case (4,000 sheets) of 8.5 x 11 white copier and printer paper for home or office use
- Multipurpose letter size copy paper works with laser/inkjet printers, copiers and fax machines
- Smooth 20lb weight paper for consistent ink and toner distribution; dries quickly and resists paper jams
- Bright white paper (92 GE; 104 Euro) offers great contrast for crisp printing and vivid color
- Virgin copy paper providing professional quality results; acid-free to prevent yellowing
Or skip the browser setup
If you need a screenshot or PDF without maintaining Chromium code, ScreenshotNeo provides a website screenshot API and MCP server. A single GET request can return PNG, JPEG, WebP, or PDF; its cleaning steps accept consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before capture. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status.
For PDF capture, use the API documentation at screenshotneo.com/docs/. The supplied call is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpThe same request in Python:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)And in Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also offers an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
Recommended Free Tools
Choosing the right approach
| Need | Best fit | Reason |
|---|---|---|
| Custom running fields inside your own generated report | Puppeteer templates | Direct control over HTML, CSS, margins, and page lifecycle. |
| Screen-media fidelity from an existing site | Puppeteer plus emulateMediaType('screen') |
Lets you choose screen rules before PDF generation. |
| Capture many public pages without browser orchestration | ScreenshotNeo | One API call, cleaning of common overlays, and no charge for failed or blocked captures. |
Frequently Asked Questions
Can I use only a footer template?
Yes. Set displayHeaderFooter: true, provide footerTemplate, and omit headerTemplate. Reserve bottom margin for the footer.
Are page numbers available in the page body?
The automatic values are injected into header and footer templates through pageNumber and totalPages. They are not ordinary body variables.
Why is my title placeholder empty?
The title value comes from the document title. Set a meaningful HTML <title> or otherwise ensure the page has a title before calling page.pdf().
Does changing the header alter the PDF page count?
It can indirectly: larger margins reduce body space, which may create additional pages. Always verify totalPages after changing template height or margins.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
