PDF.js Not Rendering on Jekyll-Based Website

[montahaee]

---

Configuration:

• Web Browser and Version: Microsoft Edge 126.0.2566.1 dev & Brave Browser 124.1.65.132
• Operating System and Version: Ubuntu 23.10
• PDF.js Version: 4.2.67
• jekyll Version: 4.3.3
• ruby Version: 3.1.3p185 (2022-11-24 revision 1a6b16756e) [x86_64-linux]
• Browser Extension: No

Steps to Reproduce the Problem:

1. For my private Jekyll-based website, I created pdfjs.liquid under /include/scripts with the following content:

   <script
       defer
       src="https://cdn.jsdelivr.net/npm/pdfjs-dist@{{ site.pdfjs.version }}/build/pdf.min.mjs"
       integrity="{{ site.pdfjs.integrity }}"
       crossorigin="anonymous"
       type="module"></script>

2. I created pdfViewer.js under assets/js/ with the following code:

   export function initializePDFViewer(pdfURL) {
    try {
        var {pdfjsLib} = globalThis;
        pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.mjs';
   
        var pdfDoc = null,
            pageNum = 1,
            pageRendering = false,
            pageNumPending = null,
            scale = 0.8,
            canvas = document.getElementById('the-canvas'),
            ctx = canvas.getContext('2d');
   
        function renderPage(num) {
            pageRendering = true;
            pdfDoc.getPage(num).then(function (page) {
                var viewport = page.getViewport({scale: scale});
                canvas.height = viewport.height;
                canvas.width = viewport.width;
   
                var renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                };
                var renderTask = page.render(renderContext);
   
                renderTask.promise.then(function () {
                    pageRendering = false;
                    if (pageNumPending !== null) {
                        renderPage(pageNumPending);
                        pageNumPending = null;
                    }
                });
            });
   
            document.getElementById('page_num').textContent = num;
        }
   
        function queueRenderPage(num) {
            if (pageRendering) {
                pageNumPending = num;
            } else {
                renderPage(num);
            }
        }
   
        function onPrevPage() {
            if (pageNum <= 1) {
                return;
            }
            pageNum--;
            queueRenderPage(pageNum);
        }
   
        document.getElementById('prev').addEventListener('click', onPrevPage);
   
        function onNextPage() {
            if (pageNum >= pdfDoc.numPages) {
                return;
            }
            pageNum++;
            queueRenderPage(pageNum);
        }
   
        document.getElementById('next').addEventListener('click', onNextPage);
   
        pdfjsLib.getDocument(pdfURL).promise.then(function (pdfDoc_) {
            pdfDoc = pdfDoc_;
            document.getElementById('page_count').textContent = pdfDoc.numPages;
            renderPage(pageNum);
        }).catch((error) => console.error('Error getting document:', error));
    } catch (error) {
        console.error('Error initializing PDF viewer:', error);
    }

}

3. On a page with a post layout, I attempted to utilize pdf.js with the following script:

   <script type="module">
       import { initializePDFViewer } from '/assets/js/pdfViewer.js';
       document.getElementById('pdf-link').addEventListener('click', function(event) {
           event.preventDefault();
           initializePDFViewer('{{ post.redirect }}');
       });
   </script>

   Unfortunately, the result was disappointing; I only observed a white box where the PDF should display.

4. Additionally, I attempted to run the simple PDF.js example, but the outcome was the same, a white box instead of the expected PDF content (refer to the screenshot below).

Screenshot:

---

[TwisterMc]

Did you add support to your server for mjs files?

[montahaee]

Hello, Thank you for your response.
Yes, GitHub Pages does indeed support serving .mjs files as part of static content. However, it’s important to note that GitHub Pages is designed to serve static content only and does not support server-side processing. This means that while you can host .mjs files (which are ECMAScript modules), any server-side processing would not be possible on GitHub Pages.

In my case, I use a CDN link like https://cdn.jsdelivr.net/..., as I mentioned in the first post. This links to JavaScript files that are hosted on the jsDelivr network, not on my GitHub Pages site. This means that the JavaScript files are loaded from jsDelivr when a user visits my site, and this works independently of whether GitHub Pages supports .mjs files or not.

So, I can continue to use .js/.mjs files in my Jekyll website hosted on GitHub Pages.