Examplepdf.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Viewer</title>
    <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
    <style>
        #viewerContainer {
            width: 100%;
            height: 600px;
            overflow-x: auto;  /* Allows horizontal scrolling */
            white-space: nowrap;  /* Makes the canvas align horizontally */
        }
        canvas {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="viewerContainer">
        <canvas id="the-canvas"></canvas>
    </div>

    <script>
        var url = 'https://drive.google.com/uc?export=download&id=1DxSelmQ9bsO0VJICxC6POteOPuN7qnpE';  // Replace with your PDF link

        var pdfjsLib = window['pdfjs-dist/build/pdf'];
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';

        var loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise.then(function(pdf) {
            console.log('PDF loaded');

            // Fetch the first page of the PDF
            var pageNumber = 1;
            pdf.getPage(pageNumber).then(function(page) {
                console.log('Page loaded');
                var scale = 1.5;  // Scale factor to adjust PDF size
                var viewport = page.getViewport({ scale: scale });

                // Set up canvas to render the PDF page
                var canvas = document.getElementById('the-canvas');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                // Render the PDF page
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext).then(function() {
                    console.log('Page rendered');
                });
            });
        }, function(reason) {
            console.error(reason);
        });
    </script>
</body>
</html>