skills.rest
d-padmanabhan
d-padmanabhanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/d-padmanabhan/agent-engineering-handbook --skill pdf-export-d-padmanabhan
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
soq123soq123

invoice-generator

Generate HTML or React invoices with browser-based PDF export.

Community
Advanced
i9wa4i9wa4
11

daily-report

Generate daily GitHub activity reports and post them as issues.

Community
Advanced
binary16labsbinary16labs
5

Screenshots

Capture browser pages or DOM targets as PNG images.

Community
Basic
grvpanchalgrvpanchal
1

server-ssr

Coordinates SSR HTML generation, hydration, and data fetching for Next.js and Express applications.

Community
Advanced