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 i.e.

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!

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 i.e.

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!

• javascript
• pdf
• gwt
• progress-bar
• pdf.js

• Are you opening a remote PDF file, or local? – levi Commented Aug 22, 2014 at 0:31
• Its a remote PDF, stored on a server. It takes about 15 seconds to load, time spent mostly on retrieving the document, which is why a progress bar would help a bit – user3735903 Commented Aug 23, 2014 at 23:00

2 Answers 2

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!

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