CODEWITHSUNDEEP
javascripthtmlcanvaspdf.js
Malik Ahmed Khan Awan
Malik Ahmed Khan Awan

Reputation: 2020

How to know if PDF.JS has finished rendering?

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.

Upvotes: 33

Views: 44789

Answers (16)

Dan
Dan

Reputation: 41

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);
});

Upvotes: 3

Joe Masinter
Joe Masinter

Reputation: 1

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);

Upvotes: 0

Paul
Paul

Reputation: 1061

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);

Upvotes: 0

nnyby
nnyby

Reputation: 4668

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);
    });
});

Upvotes: 4

việt hồ đức
việt hồ đức

Reputation: 41

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

Event name textlayerrendered includes of PDFViewerApplication.eventBus._listeners

Upvotes: 4

witttness
witttness

Reputation: 4994

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.

Upvotes: 2

redfox05
redfox05

Reputation: 3672

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'

Upvotes: 2

barbossusus
barbossusus

Reputation: 539

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!

Upvotes: 3

Kiran
Kiran

Reputation: 43

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 });

Upvotes: 0

sluijs
sluijs

Reputation: 4237

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);
});

Upvotes: 16

Luc
Luc

Reputation: 3711

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);

Upvotes: 9

myuce
myuce

Reputation: 1391

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

worked for me

Upvotes: 18

Vladimir Trifonov
Vladimir Trifonov

Reputation: 1385

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);
});

Upvotes: 1

Chris D&#39;Aoust
Chris D&#39;Aoust

Reputation: 41

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);
  }
);

Upvotes: 4

Lyon
Lyon

Reputation: 721

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
};

Upvotes: 23

Malik Ahmed Khan Awan
Malik Ahmed Khan Awan

Reputation: 2020

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.

Upvotes: 1

Related Questions