pdf.js failing on getDocument

Question

• browser: Chrome
• environment: grails app localhost

I'm running a grails app on local host (which i know there's an issue with pdf.js and local file system) and instead of using a file: url which i know would fail i'm passing in a typed javascript array and it's still failing. To be correct it's not telling me anything but "Warning: Setting up fake worker." and then it does nothing.

this.base64ToBinary = function(dataURI) {
        var BASE64_MARKER = ';base64,';
        var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
        var base64 = dataURI.substring(base64Index);
        var raw = window.atob(base64);
        var rawLength = raw.length;
        var array = new Uint8Array(new ArrayBuffer(rawLength));

        for(i = 0; i < rawLength; i++) {
        array[i] = raw.charCodeAt(i);
        }
        return array;
    };

PDFJS.disableWorker = true; // due to CORS

// I convert some base64 data to binary data here which comes back correctly
var data = utilities.base64ToBinary(result);

PDFJS.getDocument(data).then(function (pdf) {
         //nothing console logs or reaches here
         console.log(pdf);
}).catch(function(error){
//no error message is logged either
            console.log("Error occurred", error);
        });

I'm wondering if I just don't have it set up correctly? Can I use this library purely on the client side by just including pdf.js or do I need to include viewer.js too? and also i noticed compatibility file... the set up isn't very clear and this example works FIDDLE and mine doesn't and I'm not understanding the difference. Also if I use the url supplied in that example it also says the same thing.

Answer 1

I get to answer my own question:

the documentation isn't clear at all. If you don't define PDFJS.workerSrc to point to the correct pdf.worker.js file than in pdf.js it tries to figure out what the correct src path is to the file and load it.

Their method however is pretty sketchy for doing this:

if (!PDFJS.workerSrc && typeof document !== 'undefined') {
  // workerSrc is not set -- using last script url to define default location
  PDFJS.workerSrc = (function () {
    'use strict';
    var scriptTagContainer = document.body ||
                             document.getElementsByTagName('head')[0];
    var pdfjsSrc = scriptTagContainer.lastChild.src;
    return pdfjsSrc && pdfjsSrc.replace(/\.js$/i, '.worker.js');
  })();
}

They only grab the last script tag in the head and assume that that is the right src to load the file instead of searching all the script tags for the src that contains "pdf.js" and using that as the correct one.

Instead they should just make it clear and require that you do in fact point PDFJS.workerSrc = "(your path)/pdf.worker.js"

Answer 2

Here is the short answer : define PDFJS.workerSrc at the begining of your code.

PDFJS.workerSrc = "(your path)/pdf.worker.js"

see the exemple on the documentation : https://mozilla.github.io/pdf.js/examples/#interactive-examples