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.
This commit is contained in:
abdullahalam123
2025-11-15 22:09:17 +05:30
parent 9ee8225114
commit ab651a5970
3 changed files with 171 additions and 117 deletions

View File

@@ -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.'
);
}