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


    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

    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."