Cannot read property 'GlobalWorkerOptions' of undefined when using pdf.js

Question

I'm using pdf.js to display multiple pdf files from my database. I've modified the base64 example code a bit, so my code looks like this:

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<script>
    $(document).ready(function () {
            var pdfjsLib = window['pdfjs-dist/build/pdf'];

            // The workerSrc property shall be specified.
            pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
            let canvas = $('.pdfOferta');
            for (let i = 0; i < canvas.length; i++) {
                var pdfData = canvas[i].getAttribute['data-pdf'];
                var loadingTask = pdfjsLib.getDocument({ data: pdfData });
                loadingTask.promise.then(function (pdf) {
                    console.log('PDF loaded');
                    // Fetch the first page
                    var pageNumber = 1;
                    pdf.getPage(pageNumber).then(function (page) {
                        console.log('Page loaded');
                        var scale = 1.5;
                        var viewport = page.getViewport({ scale: scale });
                        // Prepare canvas using PDF page dimensions
                        var canvas = document.getElementById('the-canvas');
                        var context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        // Render PDF page into canvas context
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        var renderTask = page.render(renderContext);
                        renderTask.promise.then(function () {
                            console.log('Page rendered');
                        });
                    });
                }, function (reason) {
                    // PDF loading error
                    console.error(reason);
                });
            }
        });
</script>

I've injected the base64 string inside the 'data-pdf' property in my canvas element like this (inside a loop):

<canvas class="pdfOferta" id="@Model.ListaDatasVivo[i].Ofertas[j].Arquivos[k].Id" data-pdf="@Model.ListaDatasVivo[i].Ofertas[j].Arquivos[k].ArqBase64"></canvas>

But when i try to load the page, i get this error:

Cannot read property 'GlobalWorkerOptions' of undefined

What am i missing here?

Answer 1

I had the same issue but I was able to fix it by replacing '//mozilla.github.io/pdf.js/build/pdf.worker.js'; with 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';. I guess their link is no longer valid though somehow it works in the fiddle.

Answer 2

This happens because window['pdfjs-dist/build/pdf'] is undefined. I see you are however loading the pdf.js script in your window, so you'll need to figure out where "pdfjs-dist/build/pdf" is inside your window. You can easily do:

console.log(window)

Search for pdfjs, and adjust the import depending on the structure of the window object.

For me, what worked was:

   pdfjsLib = window['exports']['pdfjs-dist/build/pdf']