Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 244
Malik Ahmed Khan Awan Avatar asked Oct 02 '12 15:10

Malik Ahmed Khan Awan


People also ask

Does PDF js work on Chrome?

What Browsers does PDF. js Support. PDF. js is used within Mozilla Firefox today as the built-in PDF viewer, and it works well within a website when viewed using the latest versions of Chrome and Firefox, whether through the pre-built PDF.

How does PDF js work?

PDF. js leverages Asynchronous JavaScript and XML (AJAX) to download the PDF file from a web server and parse its contents. Once prepared, content is then rendered onto an HTML5 <canvas> element using canvas drawing commands.

Is PDF js free to use?

PDF. js is a good free option if you're willing to invest time into implementing a UI for it. The project comes with some examples and API docs.

What is a PDF js file?

js is a JavaScript library that renders Portable Document Format (PDF) files using the web standards-compliant HTML5 Canvas. The project is led by the Mozilla Corporation after Andreas Gal launched it (initially as an experiment) in 2011.


1 Answers

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 }; 
like image 84
Lyon Avatar answered Sep 22 '22 01:09

Lyon