javascript - Cannot read property 'GlobalWorkerOptions' of undefined when using pdf.js - Stack Overflow

admin管理员组

文章数量:1399260

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?

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?

• javascript
• asp-mvc
• pdf.js

Share Improve this question Follow asked Jan 16, 2020 at 15:05 Joao VictorJoao Victor 1,17155 gold badges2121 silver badges3939 bronze badges 4

• Why did you decide that it will be working? var pdfjsLib = window['pdfjs-dist/build/pdf']; – Maksim Tikhonov Commented Jan 16, 2020 at 15:07
• <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script> is it working ? – Nipun Jain Commented Jan 16, 2020 at 15:09
• Yes, it's from their page. They got a jsfiddle: jsfiddle/pdfjs/cq0asLqz – Joao Victor Commented Jan 16, 2020 at 15:11
• 1 Add protocol to script address: http://mozilla.github.io/pdf.js/build/pdf.js to use it – Maksim Tikhonov Commented Jan 16, 2020 at 15:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./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.

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']

本文标签： javascriptCannot read property 39GlobalWorkerOptions39 of undefined when using pdfjsStack Overflow