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

[mob2]

Hi, the view loads but i Have this error in PDF.js

Uncaught TypeError: Object #<Object> has no method 'getDocument'
(I highlighted the error in the following code with ->>>>>>>>

Please help tnx!

var params = { password: password };
            
        if (me.canvasEl) {
        
            me.isLoading = true;
            
            if (typeof src === 'string') { // URL
                params.url = src;
            } else if (data && 'byteLength' in data) { // ArrayBuffer
                params.data = data;
            }
            
            // Asynchronously download PDF as an ArrayBuffer
->>>>>>>>            PDFJS.getDocument(params).then(function(pdfDoc) {
                me.pdfDoc = pdfDoc;
                me.onLoad();
            });
        }
        
        return me;
    },

[mob2]

it seems the issue was about the pdfjs/pdf.js minified file...


I copied to original one and it works...

but Now I can't build it

...

[INF] -before-page:
[INF]
[INF] -page:
[INF] building application
[INF] Deploying your application to C:\share\app\Tests\build\PurchaseApp\package

[INF] Copied C:\share\app\Tests\PurchaseApp\resources\scripts\cordova.js to C:\s
hare\app\Tests\build\PurchaseApp\package\resources\scripts\cordova.js
[INF] Copied C:\share\app\Tests\PurchaseApp\app.js to C:\share\app\Tests\build\P
urchaseApp\package\app.js
[INF] Copied C:\share\app\Tests\PurchaseApp\resources\css\app.css to C:\share\ap
p\Tests\build\PurchaseApp\package\resources\css\app.css
[INF] Copied C:\share\app\Tests\PurchaseApp\resources\css\myTheme.css to C:\shar
e\app\Tests\build\PurchaseApp\package\resources\css\myTheme.css
[INF] Copied C:\share\app\Tests\PurchaseApp\resources\images
[INF] Copied C:\share\app\Tests\PurchaseApp\resources\icons
[INF] Copied C:\share\app\Tests\PurchaseApp\resources\startup
[INF] Resolving your application dependencies (file:///C:/share/app/Tests/Purcha
seApp/index.html)
[INF] Compiling app.js and dependencies
[INF] Loading classpath entry C:\share\app\Tests\touch\src
[INF] Loading classpath entry C:\share\app\Tests\PurchaseApp\app.js
[INF] Loading classpath entry C:\share\app\Tests\PurchaseApp\app
[ERR] def was null
[ERR] failed to find meta class definition for name PurchaseApp.view.Ext.ux.pane
l.PDF
[ERR] Failed to find file(s) for depdency reference C:\share\app\Tests\PurchaseA
pp\app.js::MVC::PurchaseApp.view.Ext.ux.panel.PDF
[ERR]
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.BasicException: The following error occurred while e
xecuting this line:
[ERR] C:\share\app\Tests\PurchaseApp\.sencha\app\build-impl.xml:249: com.sencha.
exceptions.ExScript: Wrapped com.sencha.exceptions.ExBuild: Failed to find any f
iles for C:\share\app\Tests\PurchaseApp\app.js::MVC::PurchaseApp.view.Ext.ux.pan
el.PDF (x-app-build#291)   runAppBuild (x-app-build:291)   [anonymous] (x-app-bu
ild:571)   x_app_build (x-app-build:569)   <script> (anonymous:1)
[ERR]   at com.sencha.tools.compiler.sources.SymbolData.
[ERR] resolveDependencies(SymbolData.java:185)
[ERR]
[ERR] Total time: 17 seconds
[ERR] com.sencha.exceptions.BasicException: The following error occurred while e
xecuting this line:
C:\share\app\Tests\PurchaseApp\.sencha\app\build-impl.xml:249: com.sencha.except
ions.ExScript: Wrapped com.sencha.exceptions.ExBuild: Failed to find any files f
or C:\share\app\Tests\PurchaseApp\app.js::MVC::PurchaseApp.view.Ext.ux.panel.PDF
 (x-app-build#291)
   runAppBuild (x-app-build:291)
   [anonymous] (x-app-build:571)
   x_app_build (x-app-build:569)
   <script> (anonymous:1)

C:\share\app\Tests\PurchaseApp>


...

Thanks

[mob2]

now.. i had to change the sencha.cfg by adding a dir...
app.classpath=${app.dir}/app.js,${app.dir}/ux,${app.dir}/app


now it builds but on an android device the panel loads but noway to get the pdf displayed... even the loader text is not appearing... and no way to get errors.

in chrome the document ("http://cdn.mozilla.net/pdfjs/tracemonkey.pdf") is shown right.

where am I wrong? i just added pdf.js/pdf.js, pdf.js/pdf.js and pdf.js/compatibility.js as js resource.

in application I added

Ext.Loader.setConfig({
paths: {
'Ext.ux': 'ux'
}
});


and that's all.... working in chrome and no pdf shown on device (


(in chrome i get js error

Refused to get unsafe header "Accept-Ranges" but it still works..)

thanks for any help

[neoart]

when add pdf panel in a Panel
such as
==================================

...
...other items in sencha touch panel...
...
{

                xtype: 'container',
                itemId: 'pnlHoldPdfViewer',
                layout: {
                    type: 'fit'
                },
                scrollable: 'both',
                items: [
                    {
			 xtype     : 'pdfpanel',
			id:'pdfpanel',
			layout    : 'fit',
			style     : {
			     backgroundColor: '#333'
			 }                    	
                    }
                ]
            }

==================================
but the error "Cannot call method 'un' of undefined " occurs in the PDF.js

================================

  
   ...
   ...
destroy: function() {
        var me = this;
        
        me.duringDestroy = true;
        
        me.un({
            activate: me.initViewer,
            painted: me.initViewer,
            load: me.onPdfLoad,
            resize: me.resize,
            scope: me
        });
        me.canvasEl.un({
            doubletap : me.onDoubleTap,
            pinchstart : me.onPagePinchStart,
            pinch : me.onPagePinch,
            pinchend : me.onPagePinchEnd,
            scope : me
        });
      ...

====================================
(But when if view by Ext.viewport.add(....) directly is fine)
Could any one tell me why and how to solve this problem ?
Thanks for any help
Best regards

[richard.styles]

I was having the same:

Error: stream must have data

When trying to add the PDF.js & compatability.js files to Architect 3.
When it published for testing it worked, however on compiling for Production, using Architect 3 & sencha cmd this error kept popping up. I looked in the compiled app.js and the PDF & compatability files had been minified & included so I assumed something had gone ping.

I used the Ext.Loader.loadScript function to load the script during the application.launch function, as it isn't needed immediately

Ext.Loader.loadScript({

url:'path to compatability.js'

});
Ext.Loader.loadScript({

url:'path to PDF.js'

});

There doesn't seem to be much documentation for Architect 3 & the resource options when using the build options, unless of course it's buried elsewhere.

[mirkotus]

What is the easiest way to include this files in Sencha Architect 3.0 and make a pdf panel

[WixSL]

Hi,
I'm using the "SimpleViewer" example as a model.

var objPdf = Ext.Viewport.add({
           xtype     : 'pdfpanel',
           fullscreen: true,
           layout    : 'fit',
           src       : 'http://mysite.com/my_pd_folder/another_folder/mypdf.pdf'
});

objPdf.show(); 

I can't get to work PDF viewer from an .apk file generated with Cordova.
I have a *.pdf file generated in the server and i want to request it from the mobile app and show it in the viewer.
Doesn't work.
It shows the Sencha Touch Panel with the "Loading pdf, please wait" message, but it freezes right there.

Debugging:
When i try it in a web browser, i can see that the app is trying to request the file "http://mysite.com/my_pd_folder/undefined". I don't know why.

Any suggestions PLEASE!!!
I'ts really frustrating.

[WixSL]

Can anyone help on this? At least a hint or an idea.

[lstolz]

Is this component still in development process?

I have some display errors when using the component with new devices (like Samsung Galaxy S4). On the right border there's always a part of the next page or a zoom-in of the current pdf-Page.

[hudibm]

Hi,
I downloaded your "SimpleViewer" example and runs fine (also when i try displaying my own 'small' pdfs)
but when i try displaying a pdf over 1MB it wont display and shows no errors.
Can you please tell me why? and how i can fix it? (as of now testing in chrome on desktop but will need this to wrok in ios webapp)

Thanx!