hermes-config/skills/software-development/jspdf-pdf-export/references/pdf-to-images-full-code.md

pdf-to-images.ts — Full Reference Code

This file was created for SPQ-v2 at /mnt/seagate8tb/Websites/ShopProQuote.backup-20260626-2058/spq-v2/src/lib/pdf-to-images.ts.

Key Design Decisions

1. Dual input (jsPDF | Blob): The function accepts either a jsPDF instance (uses doc.output('arraybuffer')) or a Blob (reads via blob.arrayBuffer()). This lets callers pass the result of generateQuotePDF() which returns a Blob, without needing access to the internal jsPDF doc.

2. Scale=2: Retina-quality at 144 DPI (2× 72 DPI base). Adjust for quality vs. file size.

3. Off-screen canvas: document.createElement('canvas') — never appended to DOM, no visual flash.

4. Blob URL anchor click: Each PNG triggers a download via <a download> pattern. The anchor is briefly appended to document.body so browsers treat the click as a user gesture.

5. Memory cleanup: URL.revokeObjectURL() and page.cleanup() prevent leaks.

Usage

// With a Blob from generateQuotePDF:
const blob = await generateQuotePDF(quote, settings);
await downloadPdfAsImages(blob, 'Jon Smith');
// Downloads: Jon_Smith_Page1.png, Jon_Smith_Page2.png, ...

// With a jsPDF instance directly:
const doc = new jsPDF('p', 'pt', 'letter');
// ... build PDF ...
await downloadPdfAsImages(doc, 'Jon Smith');
// Then doc.save('quote.pdf') still works — doc is unmodified

main.tsx Worker Configuration

import * as pdfjsLib from 'pdfjs-dist';
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url,
).toString();

The new URL(..., import.meta.url) pattern tells Vite to treat the worker file as a static asset and copy it into the build output. Without this, pdf.js blocks the main thread.