Hybrid View

  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

    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
    690
    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


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

    thanks

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

      0  

    Default


    Quote Originally Posted by SunboX View Post
    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.
    I think the problem is that Safari (on iPad) does not cache such files even if you write them to the manifest. I have the same problem with a simple video. It doesn't get cached and therefore cannot be loaded from cache. Because the caching of all files is a key requirement of my project I just cannot go with Sencha here. Anyways. Thank you very much for your effort and all the best!

  8. #8
    Sencha User biggbest's Avatar
    Join Date
    Jun 2011
    Location
    France
    Posts
    38
    Vote Rating
    5
    biggbest is on a distinguished road

      0  

    Default Doesn't work with PhoneGaped application

    Doesn't work with PhoneGaped application


    Thank you for that work, I was looking for the plugin since a while !

    However, when built for iPhone / iPad with PhoneGap (Cordova), there is an error, the log begin with :
    Code:
    AppDelegate::shouldStartLoadWithRequest: Received Unhandled URL
    Everything is loaded except the pdf, so no text is displayed, just 14 whites pages (with the your pdf link).

    An idea to make it working ? :-(

  9. #9
    Sencha User
    Join Date
    Oct 2012
    Posts
    29
    Vote Rating
    0
    jerrysolomon is on a distinguished road

      0  

    Default


    Hi Sunny,

    Can you give me a quick update on the status of the pdf panel? As far as I can tell, it's still the only real solution for ST2. I have it working suitably in browsers, but it seems to hang when packaged in a native app (I've seen someone else post this problem in the forum). Are there plans to continue development on the panel? Thanks so much for sharing your efforts!
    Jerry

  10. #10
    marco.marsala
    Guest

    Default Solved: how to fix pdf.js in production build

    Solved: how to fix pdf.js in production build


    Simply replace the minified pdf.js in your production build with the pdf.js you're using in test build... this is needed because the minification routine damages the file.

    See my question here on how to disable minification on some files: http://www.sencha.com/forum/showthre...-on-some-files