initial commit

skills/self-hosting/shop-pro-quote/references/pdf-to-images.md

@@ -0,0 +1,71 @@
+# PDF Export as Images (pdf-to-images.ts)
+
+Converts every page of a jsPDF document into separate PNG files that the browser downloads automatically.
+
+## Installation
+
+```bash
+npm install pdfjs-dist
+```
+
+Worker config in `main.tsx`:
+
+```typescript
+import * as pdfjsLib from 'pdfjs-dist';
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.mjs',
+  import.meta.url,
+).toString();
+```
+
+## Function Signature
+
+```typescript
+import { downloadPdfAsImages } from '../lib/pdf-to-images';
+
+// Option A: pass a jsPDF instance
+const doc = new jsPDF();
+// ... build PDF content ...
+await downloadPdfAsImages(doc, 'Jon Smith');
+
+// Option B: pass a Blob from generateQuotePDF()
+const blob = await generateQuotePDF(quote, settings);
+await downloadPdfAsImages(blob, 'Jon Smith');
+```
+
+## How It Works
+
+1. Accepts `jsPDF | Blob` — if Blob, reads as ArrayBuffer; if jsPDF, calls `doc.output('arraybuffer')`
+2. Loads PDF binary into pdfjsLib
+3. Iterates each page, renders onto an off-screen `<canvas>` at 2× scale (144 DPI)
+4. Exports canvas as `image/png` Blob
+5. Triggers a browser download for each page as `{CustomerName}_Page{N}.png`
+
+## Naming
+
+Spaces in customer name become underscores. Output: `Jon_Smith_Page1.png`, `Jon_Smith_Page2.png`, etc.
+
+## Scale Tuning
+
+- `scale = 1` → 72 DPI (small files)
+- `scale = 2` → 144 DPI (default, good quality)
+- `scale = 3` → 216 DPI (print quality, larger files)
+
+## Dual-Input Pattern
+
+The function accepts both `jsPDF` and `Blob` to work with `generateQuotePDF()` which returns a Blob. This avoids needing to expose the internal jsPDF doc from the builder. The pattern is:
+
+```typescript
+export async function downloadPdfAsImages(
+  pdfInput: jsPDF | Blob,
+  customerName: string,
+): Promise<void> {
+  let arrayBuffer: ArrayBuffer;
+  if (pdfInput instanceof Blob) {
+    arrayBuffer = await pdfInput.arrayBuffer();
+  } else {
+    arrayBuffer = pdfInput.output('arraybuffer');
+  }
+  // ... rest uses pdfjsLib
+}
+```