CODEWITHSUNDEEP
gwtpdf.js
emertech
emertech

Reputation: 23

PDF.js with GWT application does not work

We have an application built on GWT framework where we want to display a PDF file without any browser plugin and are currently evaluating PDF.js to do that. The problem is, no matter what I do, I am not able to render a PDF file onto a canvas in our GWT application. Do give some background

  1. The PDF file ticket is retrieved from server.

  2. The PDF.js file ticket is retrieved from server and is embedded in the HTML body by using this script 

    var head= document.getElementsByTagName('body')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.setAttribute('charset', 'UTF-8');
script.src=url;
head.appendChild(script);

  3. Canvas element is created in the View (using googles MVP pattern here) and a JSNI call is made to the script which embeds the PDF.js in the HTML body using the above function. The script then makes a call to function which works with PDFJS class defined in PDF.js file.

  4. The function to render the PDF file on canvas is as below : 

    PDFJS.disableWorker = true; 
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) 
{
    pdf.getPage(1).then(function getPageHelloWorld(page) 
    {
        var scale = 1.25;        
        var viewport = page.getViewport(scale);
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        page.render({canvasContext: context, viewport: viewport});
        page.startRendering(context);
        alert("Finished rendering");  
    });
});

  5. The canvas and context are created in the View class and passed to the javascript.

The problem here is, after the call to JSNI is made, I show alerts of all variables. The browser shows alerts except when I make a call alert(PDFJS). This shows that PDFJS variable is not being recognised in the script. This makes me think PDF.js file is not correctly embedded in the view or there is something else that I am missing.

Note: I have downloaded most of the examples over the net and most of them work locally i.e. I can modify the PDF.js file path to pick up a local copy and the HTML still renders the PDF. It has no problem reading the PDFJS variable. Its only in this GWT application that I see these problems.

Does anyone have any clue whats happening. Your help will be highly appreciated.

Thanks

Upvotes: 2

Views: 1750

Answers (2)

Thomas Broyer
Thomas Broyer

Reputation: 64541

Your problem is that you're injecting the script so it aloads asynchronously, but you don't wait until after it's loaded to start using it.

Try using ScriptInjector.FromUrl to inject the script and put the rest of your code in the Callback's onSuccess.

Injecting the script synchronously (by adding it to your HTML host page, or GWT Module descriptor —note: won't work with the xsiframe linker—), as proposed by Ilya is of course also a solution.

Upvotes: 4

Ilya
Ilya

Reputation: 2167

Try to add <script src="PDF.js"/> in your .gwt.xml file and put PDF.js file in your public director

Upvotes: 3

Related Questions