A PDF Viewer Panel - No Browser Plugin required, pure JavaScript

[SunboX]

Ext.ux.panel.PDF

A PDF Viewer Panel for the Sencha Touch 2 Framework - No Browser Plugin required, pure JavaScript.
It renders one page at once because of rendering speed. The page scale can be changed by using multitouch gestures like the Zoom-Gesture or Pinch-To-Zoom.
PDF Rendering is done using the great Mozilla PDF.js Library (https://github.com/mozilla/pdf.js).

By now the rendering speed isn´t very good. Take care by changing the maxPageScale config! I hope this is getting better with future development of mozilla´s PDF.JS.
The rendered page looks a bit blurry. This can be fixed by applying a sharpening filter on the rendered canvas. But this will cost some more cpu time, because we cant use WebGL by now.


Github Project

https://github.com/SunboX/st2_pdf_panel


Usage

Ext.application({

    views : [
        'Ext.ux.panel.PDF'
    ],
    
    launch: function() {
        
        Ext.Viewport.add({
            xtype     : 'pdfpanel',
            fullscreen: true,
            layout    : 'fit',
            src       : 'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf', // URL to the PDF - Same Domain or Server with CORS Support
        });
    }
});

Examples

For an demo, please visit http://SunboX.github.com/st2_pdf_pan.../SimpleViewer/

Single page demo: http://SunboX.github.com/st2_pdf_panel/demo/NoToolbar/

[mrsunshine]

Great stuff!

thanks for sharing!

[morphew]

Hi there,

First of all thanks for this great work. It is an awesome feature and important extensions. Unfortunately I have a problem using this in production build. It works perfectly in a testing build and in the development environment. Unfortunately I need the offline feature so production mode is a must have.

Here is the code that I use in a carousel:

{
    xtype     : 'pdfpanel',
    fullscreen: false,
    layout    : 'fit',
    src       : 'resources/media/Checkliste.pdf', // URL to the PDF - Same Domain or Server with CORS Support
    style     : {
        backgroundColor: '#333'
    },
    hidePagingtoolbar: false,
    pagingtoolbarDock: 'top'
}

When I run the production build I get the following error in Chrome (console output):

Error: stream must have data pdf.js:1
at dg (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js:1:8072) at cw (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js:1:8653) at Object.dW (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js:1:5243) at Object.dU (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js:1:5115) at dY (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js:1:775669) at d0 (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js:1:776579) at <error: Error: INVALID_STATE_ERR: DOM Exception 11> pdf.js:1

• [COLOR=red !important]Uncaught Error: stream must have data pdf.js:1[/COLOR]
  • [COLOR=red !important]dg[/COLOR]pdf.js:1
  • [COLOR=red !important]cw[/COLOR]pdf.js:1
  • [COLOR=red !important]dW[/COLOR]pdf.js:1
  • [COLOR=red !important]dU[/COLOR]pdf.js:1
  • [COLOR=red !important]dY[/COLOR]pdf.js:1
  • [COLOR=red !important]d0[/COLOR]pdf.js:1
  • [COLOR=red !important]dT[/COLOR]

Unfortunately the iPad doesn't output errors but is not working on it as well. Again in a testing build everything works fine in Chrome and on the iPad.

The pdf file is also defined in app.json's cache section with

"resources/media/Checkliste.pdf",

I hope you can help me here.

Best regards
Morphew

[SunboX]

Hi, sry I didn´t have tested that. Seems like chrome can´t load the file from local file system. Maybe it´s a permission problem. Don´t know it. I havn´t time to look at this now. Maybe next week.

What´s the difference between testing and production build?

The file loading is done by https://github.com/mozilla/pdf.js
Maybe we have to rewrite it using the local FileSystem object provided by JavaScript (or PhoneGap).

greetings Sunny

[SunboX]

Ok, I think you could use the FileReader API:

http://docs.phonegap.com/en/2.0.0/co...tml#FileReader

and "readAsDataURL". Than you have to convert the base64 string into an byte array:

https://github.com/danguer/blog-exam...se64-binary.js

Like This:

Ext.application({


    name  : 'No-Toolbar Demo',
    views : [
        'Ext.ux.panel.PDF'
    ],
    launch: function() {
        
        var file = 'resources/media/Checkliste.pdf';
        
        var viewer = Ext.crete('Ext.ux.panel.PDF', {
            fullscreen: true,
            layout    : 'fit'
        });
        
        Ext.Viewport.add(viewer);
        
        // Read the local file into a Uint8Array.
        var fileReader = new FileReader();
        fileReader.onload = function(evt) {
            var base64String = evt.target.result;
            var byteArray = Base64Binary.decodeArrayBuffer(base64String);  
            viewer.setData(byteArray);
        };
        
        fileReader.readAsDataURL(file);
    }
});

But I have to extend Ext.ux.panel.PDF first, so you can pass the raw data ("setData()") instead of an URL ("setSrc()").

Will tell you, if I get it working.

[kmayank]

plugin doesn't seem to working on mobile device, can you please look into this

thanks

[SunboX]

Which device? Browser based App or hybrid/native? If hybrid, build with PhoneGap/Cordova or with Sencha Touch Packager?

greetings Sunny

[kmayank]

hybrid, build with PhoneGap/Cordova on galaxy S


thanks

[SunboX]

Are you loading the PDF from local file system (packed together with the App). If so, I´m working on this. The PDF Viewer Panel can only load PDF files from a Web-Server by now. Loading from local filesystem isn´t possible. I hope I can get his fixed soon.

greetings Sunny

[kmayank]

Hi,

I have tried it both ways nothing works and if you open the example in mobile browser the pdf doesn't load, it displays loader endlessly.

thanks