1. #1
    Sencha User SunboX's Avatar
    Join Date
    Mar 2010
    Posts
    238
    Vote Rating
    28
    SunboX has a spectacular aura about SunboX has a spectacular aura about

      3  

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

    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

    Code:
    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/
    Water is coffee with javascript turned off.

  2. #2
    Sencha - Training Team mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    692
    Vote Rating
    12
    mrsunshine will become famous soon enough

      0  

    Default

    Great stuff!

    thanks for sharing!

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    2
    Vote Rating
    0
    morphew is on a distinguished road

      0  

    Default

    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:
    Code:
    {
        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
    Code:
    "resources/media/Checkliste.pdf",
    I hope you can help me here.

    Best regards
    Morphew

  4. #4
    Sencha User SunboX's Avatar
    Join Date
    Mar 2010
    Posts
    238
    Vote Rating
    28
    SunboX has a spectacular aura about SunboX has a spectacular aura about

      0  

    Default

    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
    Water is coffee with javascript turned off.

  5. #5
    Sencha User SunboX's Avatar
    Join Date
    Mar 2010
    Posts
    238
    Vote Rating
    28
    SunboX has a spectacular aura about SunboX has a spectacular aura about

      0  

    Default

    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:
    Code:
    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.
    Water is coffee with javascript turned off.

  6. #6
    Sencha User
    Join Date
    Jul 2012
    Posts
    13
    Vote Rating
    0
    kmayank is on a distinguished road

      0  

    Default plugin doesn't seem to working on mobile device

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

    thanks

  7. #7
    Sencha User SunboX's Avatar
    Join Date
    Mar 2010
    Posts
    238
    Vote Rating
    28
    SunboX has a spectacular aura about SunboX has a spectacular aura about

      0  

    Default

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

    greetings Sunny
    Water is coffee with javascript turned off.

  8. #8
    Sencha User
    Join Date
    Jul 2012
    Posts
    13
    Vote Rating
    0
    kmayank is on a distinguished road

      0  

    Default hybrid, build with PhoneGap/Cordova

    hybrid, build with PhoneGap/Cordova on galaxy S


    thanks

  9. #9
    Sencha User SunboX's Avatar
    Join Date
    Mar 2010
    Posts
    238
    Vote Rating
    28
    SunboX has a spectacular aura about SunboX has a spectacular aura about

      0  

    Default

    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
    Water is coffee with javascript turned off.

  10. #10
    Sencha User
    Join Date
    Jul 2012
    Posts
    13
    Vote Rating
    0
    kmayank is on a distinguished road

      0  

    Default tried it both ways

    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