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 event to know if the rendering of the pdf page in canvas has been finished or not. because when I try to capture the output of canvas it is blank. but the pdf page is rendered properly. it looks like my capture event is being called before the pdf.js finishes the rendering process.

here is my code:

page.render(renderContext);
var myImage = new Image();
myImage.src = document.getElementById('my-canvas-id').toDataURL();
$('body').append(myImage);

If I execute the same code in my FireFox's console this works fine. so nothing is wrong with this code.

Just to let you people know that I already have tried document.ready and window.load events.

Answer 1

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 2

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

worked for me

Answer 3

At the time of writing, this did work. I'm not sure if it still does.

PDFJS makes use of Promises. The easiest thing to do is the following:

page.render(renderContext).promise.then(function(){
  document.body.appendChild(canvas);
});

Answer 4

Using the textlayerrendered event worked for me:

document.addEventListener('textlayerrendered', function (event) {
  // was this the last page?
  if (event.detail.pageNumber === PDFViewerApplication.page) {
    console.log('Finished rendering!');
  }
}, true);

Answer 5

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 6

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

Event name textlayerrendered includes of PDFViewerApplication.eventBus._listeners

Answer 7

While examining these solutions, I was having issues getting the renderContext, so I ended up using this approach listening to pagerendered:

document.addEventListener("pagerendered", function(e){

});

In my case, I just wanted to call some external function after the page was rendered, with minimal effort.

Hope this helps. Cheers!

Answer 8

According to documentation from PDF.js.

for versions before 2.2 use:
page.render(renderContext).then(function(){
var myImage = new Image();
myImage.src = document.getElementById('my-canvas-id').toDataURL();
$('body').append(myImage);
});

For versions after and including 2.2 use: page.render(renderContext).promise.then(function(){
var myImage = new Image();
myImage.src = document.getElementById('my-canvas-id').toDataURL();
$('body').append(myImage);
});

Answer 9

If you're using pdf.js with the viewer application, here's the best way I've found to wait for it to be initialized:

// Wait for the PDFViewerApplication to initialize                                                                                                                         
PDFViewerApplication.initializedPromise.then(function() {
    // Do whatever startup code you need to here, now that the EventBus
    // is read. For example:
    PDFViewerApplication.eventBus.on('pagerendered', function (e) {
        annotationInterface.onPageRendered(e);
    });
});

Answer 10

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.

Answer 11

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 12

I have changed my code in this way and it helped me what I wanted to do:

pageRendering = page.render(renderContext);
pageRendering.onData(function(){
    var myImage = new Image();
    myImage.src = document.getElementById('my-canvas-id').toDataURL();
    $('body').append(myImage);
});

This helps only if the specific page has finished rendering. it doesn't tell you about the rendering of all of the pages.

Answer 13

If you want to render all pages of pdf document in different canvases, all one by one synchronously this is kind of solution:

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PDF Sample</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="pdf.js"></script>
    <script type="text/javascript" src="main.js">
    </script>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body id="body">  
</body>
</html>

main.css

canvas {
    display: block;
}

main.js

$(function() {  
    var filePath = "document.pdf";

    function Num(num) {
        var num = num;

        return function () {
            return num;
        }
    };

    function renderPDF(url, canvasContainer, options) {
        var options = options || {
                scale: 1.5
            },          
            func,
            pdfDoc,
            def = $.Deferred(),
            promise = $.Deferred().resolve().promise(),         
            width, 
            height,
            makeRunner = function(func, args) {
                return function() {
                    return func.call(null, args);
                };
            };

        function renderPage(num) {          
            var def = $.Deferred(),
                currPageNum = new Num(num);
            pdfDoc.getPage(currPageNum()).then(function(page) {
                var viewport = page.getViewport(options.scale);
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                var renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                };

                if(currPageNum() === 1) {                   
                    height = viewport.height;
                    width = viewport.width;
                }

                canvas.height = height;
                canvas.width = width;

                canvasContainer.appendChild(canvas);

                page.render(renderContext).then(function() {                                        
                    def.resolve();
                });
            })

            return def.promise();
        }

        function renderPages(data) {
            pdfDoc = data;

            var pagesCount = pdfDoc.numPages;
            for (var i = 1; i <= pagesCount; i++) { 
                func = renderPage;
                promise = promise.then(makeRunner(func, i));
            }
        }

        PDFJS.disableWorker = true;
        PDFJS.getDocument(url).then(renderPages);       
    };

    var body = document.getElementById("body");
    renderPDF(filePath, body);
});

Answer 14

page.render is a promise so you have to do your stuff inside your success like below:

page.render({
  canvasContext: context,
  viewport: viewport
}).then(function() {
//do your stuff here });

Answer 15

This is the only way I've found to use the Viewer API and manipulate rendered pages without errors.

onPagesLoaded = () => { 
    // do something, set zoom, current page, ...
};

window.PDFViewerApplication.eventBus.on('pagesloaded', onPagesLoaded);

Answer 16

If you are creating/modifying the PDF on the backend you can add pdfjavascript to the PDF file to print on load.

var pp = getPrintParams();  
pp.interactive=pp.constants.interactionLevel.full; 
print(pp);