I am going of one of their last example, and modified it a bit. The problem that I am facing is that I can’t click on any of the links. How would you make it so I can (couldn’t find documentation). I unfortunately have to only make use of it like this, can’t download their repo and work with that, has to all be in one html file.

Code if it would help anyone.

<script src="//mozilla.github.io/pdf.js/build/pdf.mjs" type="module"></script>

<script type="module">
    // If absolute URL from the remote server is provided, configure the CORS
    // header on that server.
    var url = 'https://lukasjarmara.github.io/hosting/What%20Next%20Catalog.pdf';

    // Loaded via <script> tag, create shortcut to access PDF.js exports.
    var { pdfjsLib } = globalThis;

    // The workerSrc property shall be specified.
    pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.mjs';

    var pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null,
        scale = 1.5, // Increased scale for better image quality
        canvas1 = document.getElementById('the-canvas-1'),
        ctx1 = canvas1.getContext('2d'),
        canvas2 = document.getElementById('the-canvas-2'),
        ctx2 = canvas2.getContext('2d');

    /**
     * Get page info from document, resize canvas accordingly, and render page.
     * @param num Page number.
     */
    function renderPage(num, canvas, ctx) {
        pageRendering = true;
        // Using promise to fetch the page
        pdfDoc.getPage(num).then(function(page) {
            var viewport = page.getViewport({scale: scale});
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport,
                renderInteractive: true // Enabled interactive rendering
            };
            var renderTask = page.render(renderContext);

            // Wait for rendering to finish
            renderTask.promise.then(function() {
                pageRendering = false;
                if (pageNumPending!== null) {
                    // New page rendering is pending
                    renderPage(pageNumPending, canvas, ctx);
                    pageNumPending = null;
                }
            });
        });
    }

    /**
     * If another page rendering in progress, waits until the rendering is
     * finised. Otherwise, executes rendering immediately.
     */
    function queueRenderPage(num) {
        if (pageRendering) {
            pageNumPending = num;
        } else {
            renderPage(num, canvas1, ctx1);
            if (num < pdfDoc.numPages) {
                renderPage(num + 1, canvas2, ctx2);
            }
            updatePageNum();
        }
    }

    function updatePageNum() {
        document.getElementById('page_num').textContent = pageNum + ' - ' + (pageNum + 1);
    }

    /**
     * Displays previous page.
     */
    function onPrevPage() {
        if (pageNum <= 1) {
            return;
        }
        pageNum -= 2;
        queueRenderPage(pageNum);
    }
    document.getElementById('prev').addEventListener('click', onPrevPage);

    /**
     * Displays next page.
     */
    function onNextPage() {
        if (pageNum >= pdfDoc.numPages - 1) {
            return;
        }
        pageNum += 2;
        queueRenderPage(pageNum);
    }
    document.getElementById('next').addEventListener('click', onNextPage);

    /**
     * Asynchronously downloads PDF.
     */
    pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
        pdfDoc = pdfDoc_;
        document.getElementById('page_count').textContent = pdfDoc.numPages;

        // Initial/first page rendering
        queueRenderPage(pageNum);
    });
</script>

<div>
    <button id="prev">Previous</button>
    <button id="next">Next</button>
       
    <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>

<div style="display: flex; justify-content: space-between;">
    <canvas id="the-canvas-1" style="width: 50%;"></canvas>
    <canvas id="the-canvas-2" style="width: 50%;"></canvas>
</div>

Thanks!

EDIT: I think from the comments I went to this the wrong way, I do not want to create a pdf, just display one. What would you recommend I do if I would want to keep this format