# Puppeteer PDF > Puppeteer PDF - Skill: `comeonoliver/puppeteer-pdf` (Agent Skill) - Install (CLI): `npx skillmds@latest add comeonoliver/puppeteer-pdf` - Raw SKILL.md: https://api.skillmd.com/api/skills/comeonoliver/puppeteer-pdf/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Docs & Writing - Author: ComeOnOliver (https://skillmd.com/u/comeonoliver) - Updated: 2026-09-21 - Page: https://skillmd.com/skills/comeonoliver/puppeteer-pdf --- # Puppeteer PDF Use headless Chrome to render HTML to PDF. Full CSS support — flexbox, grid, web fonts, media queries. ## Setup ```bash # Install Puppeteer. Downloads Chromium automatically. npm install puppeteer ``` ## Basic HTML to PDF ```typescript // src/pdf/from-html.ts — Convert an HTML string to a PDF file. // Puppeteer launches headless Chrome, sets the HTML content, and prints to PDF. import puppeteer from "puppeteer"; export async function htmlToPdf(html: string, outputPath: string) { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.setContent(html, { waitUntil: "networkidle0" }); await page.pdf({ path: outputPath, format: "A4", margin: { top: "20mm", right: "15mm", bottom: "20mm", left: "15mm" }, printBackground: true, }); await browser.close(); } ``` ## URL to PDF ```typescript // src/pdf/from-url.ts — Navigate to a URL and save the page as PDF. // Useful for archiving web pages or converting dashboards to reports. import puppeteer from "puppeteer"; export async function urlToPdf(url: string, outputPath: string) { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(url, { waitUntil: "networkidle0" }); await page.pdf({ path: outputPath, format: "A4", printBackground: true, }); await browser.close(); } ``` ## Template-Based Reports ```typescript // src/pdf/report-template.ts — Generate a styled report from data using an // HTML template. Supports CSS grid layouts, charts, and branded headers. import puppeteer from "puppeteer"; interface ReportData { title: string; date: string; rows: { label: string; value: string }[]; logoUrl: string; } export async function generateReport(data: ReportData): Promise { const html = `

Report generated: ${data.date}

${data.rows.map((r) => ``).join("")}

Metric	Value
${r.label}	${r.value}

`; const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.setContent(html, { waitUntil: "networkidle0" }); const pdf = await page.pdf({ format: "A4", printBackground: true, margin: { top: "20mm", right: "15mm", bottom: "20mm", left: "15mm" }, }); await browser.close(); return Buffer.from(pdf); } ``` ## Headers and Footers ```typescript // src/pdf/header-footer.ts — Add dynamic headers and footers with page numbers. // Puppeteer supports HTML templates for header/footer regions. import puppeteer from "puppeteer"; export async function pdfWithPageNumbers(html: string, outputPath: string) { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.setContent(html, { waitUntil: "networkidle0" }); await page.pdf({ path: outputPath, format: "A4", printBackground: true, displayHeaderFooter: true, margin: { top: "30mm", bottom: "25mm", left: "15mm", right: "15mm" }, headerTemplate: `

Monthly Performance Report

`, footerTemplate: `

Page of

`, }); await browser.close(); } ``` ## PDF Buffer for API Responses ```typescript // src/pdf/api.ts — Generate PDF in memory and return as buffer for API endpoints. import puppeteer from "puppeteer"; import type { Request, Response } from "express"; export async function handlePdfRequest(req: Request, res: Response) { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.setContent(`

Invoice #${req.params.id}

`, { waitUntil: "networkidle0", }); const pdf = await page.pdf({ format: "A4", printBackground: true }); await browser.close(); res.contentType("application/pdf"); res.send(pdf); } ```

${data.title}

Invoice #${req.params.id}