From ab651a5970cc2d172cab1d3f319ba36248c29e75 Mon Sep 17 00:00:00 2001
From: abdullahalam123 <abdullah.alam.tapadar2000@gmail.com>
Date: Sat, 15 Nov 2025 22:09:17 +0530
Subject: [PATCH] feat(pdfjs-viewer): enhance form viewer with print
 functionality and XFA support

Added a print button to the PDF viewer for direct printing. Implemented a scripting manager to handle XFA forms, ensuring proper rendering and interaction. Updated form-filler logic to support XFA detection and improved error handling for unsupported save operations. Refactored file handling to streamline PDF loading and viewer initialization.
---
 public/pdfjs-viewer/form-viewer.html |  79 ++++++++++++--
 src/js/handlers/fileHandler.ts       | 147 ++++++++++++++-------------
 src/js/logic/form-filler.ts          |  62 ++++-------
 3 files changed, 171 insertions(+), 117 deletions(-)
diff --git a/public/pdfjs-viewer/form-viewer.html b/public/pdfjs-viewer/form-viewer.html
index 3584d22..4e2a8bc 100644
--- a/public/pdfjs-viewer/form-viewer.html
+++ b/public/pdfjs-viewer/form-viewer.html
@@ -112,6 +112,25 @@
       background-color: #323639;
       color: #fff;
     }
+    
+    /* Print styles */
+    /* @media print {
+      .toolbar {
+        display: none !important;
+      }
+      
+      #viewerContainer {
+        position: static !important;
+        overflow: visible !important;
+        background: white !important;
+      }
+      
+      .page {
+        page-break-after: always;
+        page-break-inside: avoid;
+        margin: 0 auto !important;
+      }
+    } */
   </style>
 </head>
 <body>
@@ -139,6 +158,7 @@
       <button id="zoomIn" title="Zoom In">+</button>
     </div>
     
+    <button id="print" title="Print to PDF">Print to PDF</button>
     <button id="download" title="Save & Download">Download</button>
   </div>
   
@@ -148,24 +168,44 @@
 
   <script type="module">
     import * as pdfjsLib from './pdf.mjs';
-    import { EventBus, PDFViewer, PDFLinkService } from './pdf_viewer.mjs';
+    import { EventBus, PDFViewer, PDFLinkService, PDFScriptingManager } from './pdf_viewer.mjs';
 
     pdfjsLib.GlobalWorkerOptions.workerSrc = './pdf.worker.mjs';
 
     const eventBus = new EventBus();
     const linkService = new PDFLinkService({ eventBus });
     
+    // Create scripting manager for XFA forms with JavaScript
+    const scriptingManager = new PDFScriptingManager({
+      eventBus,
+      // Use the packaged sandbox for PDF.js JavaScript (required for XFA)
+      sandboxBundleSrc: './pdf.sandbox.mjs',
+      docProperties: async (pdfDocument) => {
+        // Minimal doc properties are fine; XFA scripts mostly need field objects
+        return {
+          title: '',
+          author: '',
+          subject: '',
+          keywords: '',
+          creator: '',
+          producer: '',
+          creationDate: null,
+          modDate: null
+        };
+      }
+    });
+    
     const pdfViewer = new PDFViewer({
       container: document.getElementById('viewerContainer'),
       viewer: document.getElementById('viewer'),
       eventBus,
       linkService,
-      enableScripting: true,
-      enableXfa: true,
+      scriptingManager,
       renderer: 'canvas'
     });
     
     linkService.setViewer(pdfViewer);
+    scriptingManager.setViewer(pdfViewer);
 
     let pdfDocument = null;
     let currentScale = 1.0;
@@ -188,6 +228,8 @@
           enableXfa: true,
         });
         pdfDocument = await loadingTask.promise;
+        // Wire scripting to the loaded document so XFA/JS executes
+        await scriptingManager.setDocument(pdfDocument);
         pdfViewer.setDocument(pdfDocument);
         linkService.setDocument(pdfDocument);
         
@@ -205,9 +247,28 @@
     async function getPDFData() {
       if (!pdfDocument) return null;
       
-      // Get the PDF data with form fields filled
-      const data = await pdfDocument.saveDocument();
-      return data;
+      // Check if this is an XFA form
+      if (pdfDocument.isPureXfa) {
+        console.warn('Pure XFA form detected - saving with filled data is not supported');
+        window.parent.postMessage({ 
+          type: 'error', 
+          message: 'XFA forms cannot be saved with filled data. Please print to PDF instead.' 
+        }, '*');
+        return null;
+      }
+      
+      try {
+        // For AcroForms, saveDocument() should work
+        const data = await pdfDocument.saveDocument();
+        return data;
+      } catch (error) {
+        console.error('Error saving PDF document:', error);
+        window.parent.postMessage({ 
+          type: 'error', 
+          message: 'Failed to save PDF. This may be an XFA form or protected PDF.' 
+        }, '*');
+        return null;
+      }
     }
 
     // Navigation controls
@@ -253,6 +314,12 @@
       }
     });
 
+    // Print button - trigger browser print
+    document.getElementById('print').addEventListener('click', () => {
+      if (!pdfDocument) return;
+      window.print();
+    });
+    
     // Download button
     document.getElementById('download').addEventListener('click', async () => {
       const data = await getPDFData();
diff --git a/src/js/handlers/fileHandler.ts b/src/js/handlers/fileHandler.ts
index 15e47c1..ae0fb58 100644
--- a/src/js/handlers/fileHandler.ts
+++ b/src/js/handlers/fileHandler.ts
@@ -24,6 +24,17 @@ import * as pdfjsLib from 'pdfjs-dist';
 async function handleSinglePdfUpload(toolId, file) {
   showLoader('Loading PDF...');
   try {
+    // pdf-lib does not support XFA, so we let pdf.js render it
+    if (toolId === 'form-filler') {
+      hideLoader();
+
+      const logic = toolLogic[toolId];
+      if (logic && logic.setup) {
+        await logic.setup();
+      }
+      return;
+    }
+
     const pdfBytes = await readFileAsArrayBuffer(file);
     state.pdfDoc = await PDFLibDocument.load(pdfBytes as ArrayBuffer, {
       ignoreEncryption: true,
@@ -502,89 +513,89 @@ async function handleMultiFileUpload(toolId) {
     toolLogic.merge.setup();
   } else if (toolId === 'alternate-merge') {
     toolLogic['alternate-merge'].setup();
-  } else     if (toolId === 'image-to-pdf') {
-      const imageList = document.getElementById('image-list');
-      imageList.textContent = ''; 
-      state.files.forEach((file) => {
-        const url = URL.createObjectURL(file);
-        const li = document.createElement('li');
-        li.className = 'relative group cursor-move';
-        li.dataset.fileName = file.name;
+  } else if (toolId === 'image-to-pdf') {
+    const imageList = document.getElementById('image-list');
+    imageList.textContent = '';
+    state.files.forEach((file) => {
+      const url = URL.createObjectURL(file);
+      const li = document.createElement('li');
+      li.className = 'relative group cursor-move';
+      li.dataset.fileName = file.name;
 
-        const wrapper = document.createElement('div');
-        wrapper.className = 'w-full h-36 sm:h-40 md:h-44 bg-gray-900 rounded-md border-2 border-gray-600 flex items-center justify-center overflow-hidden';
+      const wrapper = document.createElement('div');
+      wrapper.className = 'w-full h-36 sm:h-40 md:h-44 bg-gray-900 rounded-md border-2 border-gray-600 flex items-center justify-center overflow-hidden';
 
-        const img = document.createElement('img');
-        img.src = url;
-        img.className = 'max-w-full max-h-full object-contain';
+      const img = document.createElement('img');
+      img.src = url;
+      img.className = 'max-w-full max-h-full object-contain';
 
-        const p = document.createElement('p');
-        p.className =
-          'absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white text-xs text-center truncate p-1';
-        p.textContent = file.name; 
+      const p = document.createElement('p');
+      p.className =
+        'absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white text-xs text-center truncate p-1';
+      p.textContent = file.name;
 
-        wrapper.appendChild(img);
-        li.append(wrapper, p);
-        imageList.appendChild(li);
-      });
+      wrapper.appendChild(img);
+      li.append(wrapper, p);
+      imageList.appendChild(li);
+    });
 
-      Sortable.create(imageList);
-      // Show image-to-pdf options and wire up slider text
-      const opts = document.getElementById('image-to-pdf-options');
-      if (opts) {
-        opts.classList.remove('hidden');
-        const slider = document.getElementById('image-pdf-quality') as HTMLInputElement;
-        const value = document.getElementById('image-pdf-quality-value');
-        if (slider && value) {
-          const update = () => (value.textContent = `${Math.round(parseFloat(slider.value) * 100)}%`);
-          slider.addEventListener('input', update);
-          update();
-        }
+    Sortable.create(imageList);
+    // Show image-to-pdf options and wire up slider text
+    const opts = document.getElementById('image-to-pdf-options');
+    if (opts) {
+      opts.classList.remove('hidden');
+      const slider = document.getElementById('image-pdf-quality') as HTMLInputElement;
+      const value = document.getElementById('image-pdf-quality-value');
+      if (slider && value) {
+        const update = () => (value.textContent = `${Math.round(parseFloat(slider.value) * 100)}%`);
+        slider.addEventListener('input', update);
+        update();
       }
     }
+  }
 
-    if (toolId === 'pdf-to-jpg') {
-      const qualitySlider = document.getElementById('jpg-quality') as HTMLInputElement;
-      const qualityValue = document.getElementById('jpg-quality-value');
-      if (qualitySlider && qualityValue) {
-        const updateValue = () => {
-          qualityValue.textContent = `${Math.round(parseFloat(qualitySlider.value) * 100)}%`;
-        };
-        qualitySlider.addEventListener('input', updateValue);
-        updateValue();
-      }
+  if (toolId === 'pdf-to-jpg') {
+    const qualitySlider = document.getElementById('jpg-quality') as HTMLInputElement;
+    const qualityValue = document.getElementById('jpg-quality-value');
+    if (qualitySlider && qualityValue) {
+      const updateValue = () => {
+        qualityValue.textContent = `${Math.round(parseFloat(qualitySlider.value) * 100)}%`;
+      };
+      qualitySlider.addEventListener('input', updateValue);
+      updateValue();
     }
+  }
 
-    if (toolId === 'pdf-to-png') {
-      const qualitySlider = document.getElementById('png-quality') as HTMLInputElement;
-      const qualityValue = document.getElementById('png-quality-value');
-      if (qualitySlider && qualityValue) {
-        const updateValue = () => {
-          qualityValue.textContent = `${qualitySlider.value}x`;
-        };
-        qualitySlider.addEventListener('input', updateValue);
-        updateValue();
-      }
+  if (toolId === 'pdf-to-png') {
+    const qualitySlider = document.getElementById('png-quality') as HTMLInputElement;
+    const qualityValue = document.getElementById('png-quality-value');
+    if (qualitySlider && qualityValue) {
+      const updateValue = () => {
+        qualityValue.textContent = `${qualitySlider.value}x`;
+      };
+      qualitySlider.addEventListener('input', updateValue);
+      updateValue();
     }
+  }
 
-    if (toolId === 'pdf-to-webp') {
-      const qualitySlider = document.getElementById('webp-quality') as HTMLInputElement;
-      const qualityValue = document.getElementById('webp-quality-value');
-      if (qualitySlider && qualityValue) {
-        const updateValue = () => {
-          qualityValue.textContent = `${Math.round(parseFloat(qualitySlider.value) * 100)}%`;
-        };
-        qualitySlider.addEventListener('input', updateValue);
-        updateValue();
-      }
+  if (toolId === 'pdf-to-webp') {
+    const qualitySlider = document.getElementById('webp-quality') as HTMLInputElement;
+    const qualityValue = document.getElementById('webp-quality-value');
+    if (qualitySlider && qualityValue) {
+      const updateValue = () => {
+        qualityValue.textContent = `${Math.round(parseFloat(qualitySlider.value) * 100)}%`;
+      };
+      qualitySlider.addEventListener('input', updateValue);
+      updateValue();
     }
+  }
 
-    if (toolId === 'jpg-to-pdf' || toolId === 'png-to-pdf') {
-      const optionsDiv = document.getElementById(`${toolId}-options`);
-      if (optionsDiv) {
-        optionsDiv.classList.remove('hidden');
-      }
+  if (toolId === 'jpg-to-pdf' || toolId === 'png-to-pdf') {
+    const optionsDiv = document.getElementById(`${toolId}-options`);
+    if (optionsDiv) {
+      optionsDiv.classList.remove('hidden');
     }
+  }
 }
 
 export function setupFileInputHandler(toolId) {
diff --git a/src/js/logic/form-filler.ts b/src/js/logic/form-filler.ts
index 5e84930..8ab68fe 100644
--- a/src/js/logic/form-filler.ts
+++ b/src/js/logic/form-filler.ts
@@ -20,38 +20,25 @@ export async function setupFormFiller() {
 
   try {
     pdfViewerContainer.innerHTML = '';
+    
+    const file = state.files[0];
+    const arrayBuffer = await readFileAsArrayBuffer(file);
+    const blob = new Blob([arrayBuffer as ArrayBuffer], { type: 'application/pdf' });
+    const blobUrl = URL.createObjectURL(blob);
+
     viewerIframe = document.createElement('iframe');
-    viewerIframe.src = '/pdfjs-viewer/form-viewer.html';
+    viewerIframe.src = `/pdfjs-viewer/viewer.html?file=${encodeURIComponent(blobUrl)}`;
     viewerIframe.style.width = '100%';
     viewerIframe.style.height = '100%';
     viewerIframe.style.border = 'none';
+    
+    viewerIframe.onload = () => {
+      viewerReady = true;
+      hideLoader();
+    };
+    
     pdfViewerContainer.appendChild(viewerIframe);
 
-    window.addEventListener('message', async (event) => {
-      if (event.data.type === 'viewerReady') {
-        viewerReady = true;
-        // Use the original uploaded bytes so that XFA streams remain intact
-        // and PDF.js can fully render XFA-based forms.
-        const file = state.files[0];
-        const pdfBytes = await readFileAsArrayBuffer(file);
-        viewerIframe?.contentWindow?.postMessage(
-          { type: 'loadPDF', data: pdfBytes },
-          '*'
-        );
-      } else if (event.data.type === 'pdfLoaded') {
-        hideLoader();
-      } else if (event.data.type === 'downloadPDF') {
-        const pdfData = new Uint8Array(event.data.data);
-        downloadFile(
-          new Blob([pdfData], { type: 'application/pdf' }),
-          'filled-form.pdf'
-        );
-        showAlert('Success', 'Form has been filled and downloaded.');
-      } else if (event.data.type === 'error') {
-        showAlert('Error', event.data.message);
-      }
-    });
-
     const formFillerOptions = document.getElementById('form-filler-options');
     if (formFillerOptions) formFillerOptions.classList.remove('hidden');
   } catch (e) {
@@ -70,21 +57,10 @@ export async function processAndDownloadForm() {
     return;
   }
 
-  try {
-    const win: any = viewerIframe.contentWindow;
-    const doc: Document | null = win?.document ?? null;
-
-    // Prefer to trigger the same behavior as the toolbar's Download button
-    const downloadBtn = doc?.getElementById('download') as HTMLButtonElement | null;
-    if (downloadBtn) {
-      downloadBtn.click();
-      return;
-    }
-
-    // Fallback: use the postMessage-based getData flow
-    win?.postMessage({ type: 'getData' }, '*');
-  } catch (e) {
-    console.error('Failed to trigger form download:', e);
-    showAlert('Export failed', 'Could not export the filled form. Please try again.');
-  }
+  // The full PDF.js viewer has its own download button in the toolbar
+  // Users can use that to download or the print button to print to PDF
+  showAlert(
+    'Download Form',
+    'Use the Download button in the PDF viewer toolbar above, or use Print to save as PDF.'
+  );
 }
