Loading Bar For Pdf.js

Question

I want to create a loading bar for pdf.js so the user can monitor how far along pdf.js is with downloading a pdf document to be rendered. My app is run in through gwt, with the pdf.js pdf reader, although I don't think this question has much to do with gwt. In the pdf.js code, there is an bject called progressCallback, which should give me the total amount of data in the pdf to be rendered, and the amount that has been loaded. It's used in methods such as getDocument ie

PDFJS.getDocument = function getDocument(source,
                                     pdfDataRangeTransport,
                                     passwordCallback,
                                     progressCallback) {

here is another method that utilizes it, and shows how it is used

messageHandler.on('DocProgress', function transportDocProgress(data) {
    if (this.progressCallback) {
      this.progressCallback({
        loaded: data.loaded,
        total: data.total
      });

I was wondering how I would use progressCallback. I can't find a way to access the loaded variable sucesfully. So far, amongst other things, I have tried setting alert windows with the value of progressCallback.loaded and it hasn't worked. Any suggestions for how to make a progressBar using this progressCallback variable? Thanks in advance!

Answer 1

You can use it in the following way:

var progressCallback = function(progress){
    var percentLoaded = progress.loaded / progress.total;
    console.log(progress); // Progress has loaded and total
};

PDFJS.getDocument = function getDocument(source,
                                     pdfDataRangeTransport,
                                     passwordCallback,
                                     progressCallback) {
// Do something...
});

Hope it helps!

Answer 2

Try this way

//load document
var loadingTask = pdf.getDocument(src);

//get progress data
loadingTask.onProgress = function(data){
   console.log( "loaded : " + data.loaded" )
   console.log( "total : " + data.total ")
}

//use document
loadingTask.promise.then( function (pdf){
   //do anything with pdf
}

hope it gonna work