feat(pdf-to-jpg): direct download resulting image and adjust filename

src/js/logic/pdf-to-jpg.ts

@@ -3,6 +3,7 @@ import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/he
 import { state } from '../state.js';
 import JSZip from 'jszip';
 import * as pdfjsLib from 'pdfjs-dist';
+import { PDFPageProxy } from 'pdfjs-dist';
 
 pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
 
@@ -13,29 +14,25 @@ export async function pdfToJpg() {
     const pdf = await getPDFDocument(
       await readFileAsArrayBuffer(state.files[0])
     ).promise;
-    const zip = new JSZip();
-
+    
     const qualityInput = document.getElementById('jpg-quality') as HTMLInputElement;
     const quality = qualityInput ? parseFloat(qualityInput.value) : 0.9;
 
+    if(pdf.numPages === 1) {
+      const page = await pdf.getPage(1);
+      const blob = await pageToBlob(page, quality);
+      downloadFile(blob, getCleanFilename(state.files[0].name) + '.jpg');
+    } else {
+    const zip = new JSZip();
     for (let i = 1; i <= pdf.numPages; i++) {
       const page = await pdf.getPage(i);
-      const viewport = page.getViewport({ scale: 2.0 });
-      const canvas = document.createElement('canvas');
-      const context = canvas.getContext('2d');
-      canvas.height = viewport.height;
-      canvas.width = viewport.width;
-
-      await page.render({ canvasContext: context, viewport: viewport, canvas }).promise;
-
-      const blob = await new Promise((resolve) =>
-        canvas.toBlob(resolve, 'image/jpeg', quality)
-      );
+      const blob = await pageToBlob(page, quality);
       zip.file(`page_${i}.jpg`, blob as Blob);
     }
 
     const zipBlob = await zip.generateAsync({ type: 'blob' });
-    downloadFile(zipBlob, 'converted_images.zip');
+    downloadFile(zipBlob, getCleanFilename(state.files[0].name) + '_jpgs.zip');
+    }
   } catch (e) {
     console.error(e);
     showAlert(
@@ -46,3 +43,26 @@ export async function pdfToJpg() {
     hideLoader();
   }
 }
+
+async function pageToBlob(page: PDFPageProxy, quality: number): Promise<Blob> {
+  const viewport = page.getViewport({ scale: 2.0 });
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  canvas.height = viewport.height;
+  canvas.width = viewport.width;
+
+  await page.render({ canvasContext: context, viewport: viewport, canvas }).promise;
+
+  const blob = await new Promise((resolve) =>
+    canvas.toBlob(resolve, 'image/jpeg', quality)
+  );
+  return blob as Blob;
+}
+
+function getCleanFilename(fileName: string): string {
+  let clean = fileName.replace(/\.pdf$/i, '').trim();
+  if (clean.length > 80) {
+    clean = clean.slice(0, 80);
+  }
+  return clean;
+}

src/js/ui.ts

@@ -774,8 +774,7 @@ export const toolTemplates = {
                 </div>
                 <p class="mt-1 text-xs text-gray-400">Higher quality = larger file size</p>
             </div>
-            <p class="mb-4 text-white text-center">Click "Download All as ZIP" to get images for all pages.</p>
-            <button id="process-btn" class="btn-gradient w-full">Download All as ZIP</button>
+            <button id="process-btn" class="btn-gradient w-full">Convert to JPG & Download All</button>
         </div>
     `,
     'jpg-to-pdf': () => `