pdf-export

Export DOM elements to multi-page PDFs with jspdf and html2canvas-pro.

15|2|Updated Dec 13, 2025

Search Tags:#client-side #pdf export #jspdf #dom rasterization #html2canvas-pro #react typescript #multi-page toc

Ready to run

npx skills add https://github.com/d-padmanabhan/agent-engineering-handbook --skill pdf-export-d-padmanabhan

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pdf-export
Source: https://github.com/d-padmanabhan/agent-engineering-handbook/tree/main/skills/pdf-export
Command: npx skills add https://github.com/d-padmanabhan/agent-engineering-handbook --skill pdf-export-d-padmanabhan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of turning a live web page, report, chart, or slide deck into a downloadable PDF without running a server-side renderer or using headless browsers.

Core Features & Use Cases

Client-side DOM rasterization to PDF: Captures one or more specified DOM nodes directly in the browser using jspdf and html2canvas-pro.
Single-element snapshots: Exports a selected element (like a dashboard card, report section, or chart container) as a clean one-page PDF.
Multi-page exports with clickable TOC bookmarks: Renders multiple fixed-size pages off-screen and adds PDF outline entries for navigation.
Guardrails for production fidelity: Addresses Tailwind 4 color parsing, CORS image handling, font readiness, export-mode animation freezing, and iOS Safari click-gesture behavior.

Quick Start

Ask for “PDF export for this React/TypeScript page using client-side jspdf + html2canvas-pro, supporting multi-page export with TOC bookmarks.”

Frequently Asked Questions about pdf-export

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I export a React DOM element to a PDF without a server-side renderer?▼

You can export a React DOM element to a PDF entirely client-side by rasterizing the node with html2canvas-pro and assembling the output with jspdf. This avoids headless browsers and generates downloadable PDFs directly in the browser.

Can I generate a multi-page PDF with clickable bookmarks from a web app?▼

Yes, multi-page PDF generation supports clickable TOC bookmarks. It renders multiple fixed-size pages off-screen with deterministic sizing and adds PDF outline entries for navigation.

Does client-side PDF export work with Tailwind 4 and CORS images?▼

Client-side PDF export includes guardrails for Tailwind 4 color parsing and CORS image handling. It also manages font readiness and export-mode animation freezing to maintain production fidelity.

What are the limitations of html2canvas-pro for iOS Safari PDF exports?▼

iOS Safari imposes user-gesture constraints on PDF exports. The Skill addresses this by ensuring client-side rasterization and jspdf assembly respect iOS click-gesture behavior to trigger downloads successfully.

What's the best way to capture a single dashboard chart as a one-page PDF?▼

The best way to capture a single chart is using single-element snapshot export. It captures a specified DOM node, like a dashboard card or chart container, and exports it as a clean one-page PDF.

Do I need jspdf and html2canvas-pro for client-side DOM rasterization?▼

Yes, client-side DOM rasterization requires html2canvas-pro for capturing nodes and jspdf for PDF assembly. These dependencies enable browser-native export for reports, charts, and arbitrary DOM elements.