Print Studio Development

Trigger: "Print Studio", "PDF generation", "React-PDF", "Fix PDF layout"

Core Principles

1. Pixel-Perfect Parity: The HTML preview (html-preview/) must match the PDF output (react-pdf/) exactly.

   • Strategy: Use shared configuration objects for dimensions, margins, and spacing. visual-test widely.

2. Pagination Strategy:

   • Avoid wrap={true} for complex layouts: It causes infinite loops and unpredictable breaks.
   • Phantom Rendering: Use a "Phantom" off-screen render to measure content height before committing to page layout.
   • Manual Page Mapping: Group content into visiblePages arrays instead of relying on the renderer's automatic flow for critical reports.

3. Performance Optimization:

   • Image Handling: Pre-load and downscale large images. Passing full-res 4K photos to React-PDF causes crashes (out of memory).
   • Text: Use standard fonts where possible. Embedding custom fonts adds significant weight.
   • Memoization: Wrap standard sections (Header, Footer) in React.memo to prevent re-renders during layout calculation.