JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XFA PDF Viewer</title>
</head>
<body>
    <h1>XFA PDF Viewer</h1>
    <input type="file" id="fileInput" accept="application/pdf" />
    <pre id="output" style="white-space: pre-wrap; background: #f5f5f5; padding: 10px; border: 1px solid #ccc;">
Upload a PDF to extract its XFA content.
    </pre>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
    <script>
        const pdfjsLib = window['pdfjs-dist/build/pdf'];

        // Inline worker script as a Blob
        const workerCode = `
            importScripts('https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js');
        `;
        const workerBlob = new Blob([workerCode], { type: 'application/javascript' });
        const workerBlobURL = URL.createObjectURL(workerBlob);

        // Set the worker source to the Blob URL
        pdfjsLib.GlobalWorkerOptions.workerSrc = workerBlobURL;

        async function extractXfa(file) {
            const arrayBuffer = await file.arrayBuffer();
            const loadingTask = pdfjsLib.getDocument({ data: arrayBuffer });

            try {
                const pdfDocument = await loadingTask.promise;

                // Debugging output
                console.log('WorkerSrc:', pdfjsLib.GlobalWorkerOptions.workerSrc);

                // Check for XFA data
                if (pdfDocument.xfaDatasets) {
                    document.getElementById('output').textContent =
                        `XFA Data Found:\n\n${pdfDocument.xfaDatasets}`;
                } else {
                   ...