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.js Viewer</title>
    <style>
        body { font-family: Arial, sans-serif; }
        #pdf-viewer { width: 100%; height: 100vh; border: 1px solid #000; }
    </style>
</head>
<body>
    <div id="pdf-viewer"></div>
    <script src="pdfjs/pdf.js"></script>
    <script>
        // Specify the URL of the PDF document
        const pdfUrl = 'path/to/your/document.pdf';

        // Load the PDF.js library
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/pdf.worker.js';

        // Asynchronous function to load and render the PDF
        async function renderPDF(url) {
            const pdf = await pdfjsLib.getDocument(url).promise;
            const page = await pdf.getPage(1);

            const scale = 1.5;
            const viewport = page.getViewport({ scale });

            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            const renderContext = {
                canvasContext: context,
                viewport: viewport
            };

            await page.render(renderContext).promise;
            document.getElementById('pdf-viewer').appendChild(canvas);
        }

        // Render the PDF
        renderPDF(pdfUrl);
    </script>
</body>
</html>