JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Digital Signature</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        iframe {
            border: 1px solid #ccc;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>PDF Digital Signature</h1>
    <div>
        <label for="fileInput">Select PDF File:</label>
        <input type="file" id="fileInput" accept="application/pdf">
    </div>
    <button id="signButton">Sign PDF</button>
    <div>
        <h3>Original PDF:</h3>
        <iframe id="pdfViewer" width="100%" height="500px"></iframe>
    </div>
    <div>
        <h3>Signed PDF:</h3>
        <iframe id="signedPdfViewer" width="100%" height="500px"></iframe>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/pdf-lib/dist/pdf-lib.min.js"></script>
    <script>
        document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
        document.getElementById('signButton').addEventListener('click', signSelectedPdf, false);

        let selectedFile = null;

        function handleFileSelect(event) {
            const file = event.target.files[0];
            if (file.type === 'application/pdf') {
                selectedFile = file;
                console.log('File selected:', file.name);

                const reader = new FileReader();
                reader.onload = function(e) {
                    const arrayBuffer = e.target.result;
                    const blob = new Blob([new Uint8Array(arrayBuffer)], { type: 'application/pdf' });
                    const url = URL.createObjectURL(blob);
                    document.getElementById('pdfViewer').src = url;
                };
                reader.readAsArrayBuffer(file);
            } else {
                alert('Please upload a PDF file.');
            }
        }

        async function...