How to know if PDF.JS has finished rendering?

Question

I am using PDF.JS to render pdf pages into different canvas elements. my requirement is to capture the output of the canvas and to display it as an image. Is there some even

Answer 1

window.addEventListener('load', function () {
    PDFViewerApplication.eventBus.on('textlayerrendered', function () {
      console.log('textlayerrendered', arguments, PDFViewerApplication)
    })

Event name textlayerrendered includes of PDFViewerApplication.eventBus._listeners

Answer 2

Depending on which components (and version) of PDF.js you are making use of, you can also use the EventBus.

If you are using the simplest implementation of PDF.js then this might not be available, but if you are using their SimpleViewer or PageViewer examples, try this:

        eventBus.on("pagesloaded", function() {
            console.log('pagesloaded');
            // your code here
        });

eventBus should already be defined, if not, you can set it up using:

var eventBus = new pdfjsViewer.EventBus();

Again, this depends on the level of complexity in your PDF Viewer. Turns out there are many different layers within PDF.js.

To listen for every page load, use the eventBus event 'pagerendered'

Answer 3

Lyon's solution of more robust. But this is the simplest solution I could find.

var renderTask = pdfPage.render(renderContext);
renderTask.promise.then(
  function pdfPageRenderCallback() {
    pageViewDrawCallback(null);
  },
  function pdfPageRenderError(error) {
    pageViewDrawCallback(error);
  }
);

• Scrapped and modified from the code found at: http://mozilla.github.io/pdf.js/web/viewer.html

Answer 4

I was also struggling with this problem.. the solution that i used is:

//Step 1: store a refer to the renderer
var pageRendering = page.render(renderContext);
//Step : hook into the pdf render complete event
var completeCallback = pageRendering.internalRenderTask.callback;
pageRendering.internalRenderTask.callback = function (error) {
  //Step 2: what you want to do before calling the complete method                  
  completeCallback.call(this, error);
  //Step 3: do some more stuff
};

Answer 5

<script type="text/javascript">
  document.addEventListener("pagesloaded", function(e) {
   //do sth..
  });
</script>

worked for me

Answer 6

As it turns out, your first line, page.render(renderContext); returns a RenderTask object which has 3 properties:

• internalRenderTask - an InternalRenderTask, duh
• cancel - a function, presumably to allow you to cancel the rendering effort
• promise - a jQuery Promise object

The Promise is the one you want. To make use of it, it goes like this:

 page.render(renderContext).promise.then(function() {

     //do something after the page is rendered here
 });

Hope that helps.