How can I make links work in pdf when using PDF.js

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>
    &nbsp; &nbsp;
    <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

Mozilla PDF.JS is the PDF surrogate viewer used by Firefox. Thus Firefox Browser should "Showcase" the vanilla abilities to view "Remote PDF" as HyperText Images with "worker" (middleware) enhancements.

The emulation of a conventional PDF reader, is exceptionally good and can partly run Adobes own XFA and other more complex PDF Widgets.

Certainly, the example glossy PDF file with inter-page links (here it jumped to 3rd image page) and external hyperlinks to "Media" etc., work well via the web "worker" without any problems.

The problem here is that the whole worker system has been replaced by dead images Thus page 2 image has gone missing) and thus there are no relative hyperlinks even if page 3 links were magically back ported to page 2.

So the canvas replacements are "glitchy" and on another run canvas 2 appears. But it is not supported by all the other worker refinements for reading/printing, annotation overlays or text links, outlines etc.

Answer

What you would need to do is replace all the missing worker activities of emulating PDF 2 HTML conversions with your own hyperlink system replacing that seen here whilst inspecting the worker activity.