PDA

View Full Version : A PDF Viewer Panel - No Browser Plugin required, pure JavaScript



SunboX
26 Aug 2012, 1:00 AM
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_panel/demo/SimpleViewer/

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

mrsunshine
30 Aug 2012, 3:29 AM
Great stuff!

thanks for sharing!

morphew
31 Aug 2012, 4:19 AM
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 (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js)
at dg (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js:1:8072 (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js)) at cw (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js:1:8653 (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js)) at Object.dW (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js:1:5243 (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js)) at Object.dU (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js:1:5115 (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js)) at dY (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js:1:775669 (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js)) at d0 (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js:1:776579 (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js)) at <error: Error: INVALID_STATE_ERR: DOM Exception 11> pdf.js:1 (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js)


Uncaught Error: stream must have data pdf.js:1 (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js)

dgpdf.js:1 (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js)
cwpdf.js:1 (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js)
dWpdf.js:1 (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js)
dUpdf.js:1 (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js)
dYpdf.js:1 (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js)
d0pdf.js:1 (http://wk10/pbvproof/build/production/resources/lib/pdf.js/pdf.js)
dT




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
31 Aug 2012, 5:09 PM
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
1 Sep 2012, 1:57 AM
Ok, I think you could use the FileReader API:

http://docs.phonegap.com/en/2.0.0/cordova_file_file.md.html#FileReader

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

https://github.com/danguer/blog-examples/blob/master/js/base64-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
3 Sep 2012, 2:25 AM
plugin doesn't seem to working on mobile device, can you please look into this

thanks

SunboX
3 Sep 2012, 4:12 AM
Which device? Browser based App or hybrid/native? If hybrid, build with PhoneGap/Cordova or with Sencha Touch Packager?

greetings Sunny

kmayank
3 Sep 2012, 4:23 AM
hybrid, build with PhoneGap/Cordova on galaxy S


thanks

SunboX
3 Sep 2012, 4:27 AM
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
3 Sep 2012, 4:36 AM
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

SunboX
3 Sep 2012, 9:01 AM
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

Works for me. Have tried it using a Galaxy Nexus S with Android 4.0.4 installed:

38433

Sry, can´t help you by now.

morphew
3 Sep 2012, 11:04 PM
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!

biggbest
4 Sep 2012, 1:10 AM
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 :

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 ? :-(

SunboX
4 Sep 2012, 1:36 AM
Hm seems like Cordova can't handl the URL. I have to look into it. But this will take some time. Btw. rendering a PDF on Canvas on Android and iOS isn't rally performant. :( And it looks blurry. This PDF Panel shouldn't be used for production by now. It was a test, but doesn't work very well. Maybe we can try again in a year or so, as devices get more performant.

biggbest
4 Sep 2012, 1:42 AM
We need to handle this kind of panel in our application, you plugin does the stuff so, even if it's blurry, it's pretty perfect. Of course, whithout working in Cordova, it's less useful for us.

I didn't found a good alternative yet :-/

SunboX
4 Sep 2012, 1:51 AM
Ok, I should get it working in Cordova. But don't have time to look at it this week. Maybe next WE.

A alternative could be using an iFrame container. Maybe porting Ext 4 "Managed iFrame" extension to ST2.

biggbest
4 Sep 2012, 3:52 AM
Hehe, thank you if you find a way to make it working with PhoneGap :-)

About the iFrame method, I've tried some months ago, but I had trouble to make things zoomable, scalable, etc. I will take a look at Managed iFrame, even if I'm not a ST expert, and don't know much more things about Ext JS.

SunboX
5 Sep 2012, 9:05 AM
A small update on PhoneGap/Cordova Support

The bundled PDF get´s loaded by now, but it seems to get messed up by converting the DataURL (base64 encoded) to an ByteArray (data stream). I have to investigate a bit more ...

https://github.com/SunboX/st2_pdf_panel/commits/phonegap-support

greetings Sunny

SunboX
5 Sep 2012, 12:08 PM
Seems like PhoneGap/Cordova can´t handle "data" URL´s. :( These are required by Mozilla´s PDF.JS to render a PDF page (injecting fonts into canvas).

Does anyone know a work around? :-/

https://github.com/SunboX/st2_pdf_panel/issues/1
(https://github.com/SunboX/st2_pdf_panel/issues/1)
Same issue described here:
https://groups.google.com/forum/?fromgroups=#!topic/phonegap/EqjMcmO1Ez4
and here:
http://pastebin.com/XXUYvJQX

SunboX
5 Sep 2012, 12:58 PM
This Test Case will fail in PhoneGap/Cordova:

<!DOCTYPE HTML>

<html>
<head>
<meta charset="utf-8">
<script>

var src = '<!DOCTYPE HTML><html><head><meta charset="utf-8">';
src += '</head><body>';
src += '</body></html>';

var frame = document.createElement('iframe');

frame.src = 'data:text/html,' + src;

frame.setAttribute('style',
'visibility: hidden;' +
'width: 10px; height: 10px;' +
'position: absolute; top: 0px; left: 0px;');

document.body.appendChild(frame);


</script>
</head>
<body>
</body>
</html>

SunboX
7 Sep 2012, 10:52 AM
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 :

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 ? :-(

This issue will be fixed with PhoneGap 2.1.0

https://issues.apache.org/jira/browse/CB-1380

greetings Sunny

pthirlby
28 Sep 2012, 10:02 PM
Hi - I have been using this tool for a client project and it seems to be dependant on the PDF. PDFs over about 1.5Mb don't want to play at all. My client also has some PDFs that are pure scans - the viewer could cope with those. However, PDFs that were almost pure text work fine - if a bit slowly.

hotdp
10 Oct 2012, 1:50 AM
Hi - I have been using this tool for a client project and it seems to be dependant on the PDF. PDFs over about 1.5Mb don't want to play at all. My client also has some PDFs that are pure scans - the viewer could cope with those. However, PDFs that were almost pure text work fine - if a bit slowly.

Hi,
Have you found a solution for the problem?

pthirlby
10 Oct 2012, 2:21 AM
Hi - no, I didn't. We took a different appoach and found a tool that we installed on the backend. This took the PDF from the database and then delivered the page that we requested as a JPG. It works really well - the jpgs are only 400k and deliver very quickly to the device so it doesn't really matter how many pages the pdf is.

loveferoz
19 Oct 2012, 6:20 AM
hey sunny i really need this plugin to work for Phonegap, have you done the same for it.. or is that it works only on sencha

dadaking
19 Oct 2012, 6:25 AM
Hello,

I try to use your pdf viewer. I try to give him an array of byte, but I not found any exemple which show how do that.

Can you explain me how I can do?

There is my panel.pdf :


var pdfPanel = Ext.create('Ext.ux.panel.PDF', {
id: 'pdfFrame',
title: bundle.getMsg('Central.Pdf.Title'),
bodyStyle:'padding:5px 5px 5px 5px',
flex: 1,
loadingMessage: bundle.getMsg('Central.Pdf.Waiting')
})


I try to feed him when I click in an tree panel.

Thanks for your answers.

acorotchi
29 Oct 2012, 11:06 AM
Hi guys,

Have someone figured out how to fix production issue, I do have as well this issue ,

I have the same issue like "Morphew", when in normal and testing mode works fine but when I try to build on production

i get:



Error: stream must have data pdf.js:1 at di (http://localhost/~corotchi//www/build/production/sdk/pdf.js/pdf.js:1:8102)
at cy (http://localhost/~corotchi//www/build/production/sdk/pdf.js/pdf.js:1:8683)
at Object.dZ (http://localhost/~corotchi/www/build/production/sdk/pdf.js/pdf.js:1:5273)
at Object.dX (http://localhost/~corotchi/www/build/production/sdk/pdf.js/pdf.js:1:5115)
at d1 (http://localhost/~corotchi/www/build/production/sdk/pdf.js/pdf.js:1:776677)
at d3 (http://localhost/~corotchi/www/build/production/sdk/pdf.js/pdf.js:1:777587)
at <error: Error: INVALID_STATE_ERR: DOM Exception 11>

Thanks

Prozaxx
6 Nov 2012, 7:45 AM
I am trying to use this but I get an error :
Uncaught ReferenceError: PDFJS is not defined

I have added everything from lib to my project and I cant seem to make it work. I am using Intelij Idea. Can someone please help me?

Also, when I open pdf.js Idea highlights it as if it had a lot of errors in it.

Thank you

acorotchi
6 Nov 2012, 8:07 AM
How do you include the PDF.JS in your app ? Fells like it cannot find it.

Prozaxx
6 Nov 2012, 8:11 AM
I have added the pdf folder containing pdf.js and compatibility.js as a global library to my project. I am also using chromium if that helps.

The weird thing is that when I Ctrl + click on PDFJS where it is used in ux.panel,pdf.js, it does indeed go to pdf.js that was included along with the library.

This is how I use it in my app. The panel opens alright, but the pdf doesnt.

this.getDocumentsContainer().push({
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
style : {
backgroundColor: '#333'
}
});

acorotchi
6 Nov 2012, 8:25 AM
You will need to include the 'pdf.js' and 'compatibility' as well in your application,

You can include in "index.html" like a
<script src="{link to the script}" ...

But I suggest to use app.json file for.

This is how pdfjs include looks like in app.json:



"js": [
{
"path": "sdk/sencha-touch.js"
},
{
"path": "sdk/pdf.js/pdf.js"
},
{
"path": "sdk/pdf.js/compatibility.js"
}
]

Prozaxx
6 Nov 2012, 8:50 AM
Oh my gosh, thank you so much!! This is now working.
I've been looking at it all day and lost all hope of making it work. Thank you so much

SButts
13 Nov 2012, 9:32 AM
pthirlby,

What tool did you use. I am looking at doing the exact same thing. Thanks for any input.

pthirlby
14 Nov 2012, 2:00 AM
http://www.sautinsoft.com/products/pdf-focus/index.php

digeridoopoo
17 Nov 2012, 9:47 AM
Thought this might be of interest to some of you - Uberflip seems to have been written using Sencha Touch, its custom PDF software. If you visit this page in Safari with developer tools turned on and user agent as Safari for iPad:

http://goingdigital.uberflip.com/i/92533/7

Their zooming technique seems very nice and smooth, just like native iOS.

:-)

pthirlby
18 Nov 2012, 2:06 AM
Thanks for the info

phoenix_trigo
23 Nov 2012, 9:15 AM
this examples work on android devices ? I can't get it to work...

extjs5788
28 Nov 2012, 12:33 PM
It worked on Android 4, but not on Android 2.3.3 - 2.3.7 and as per http://developer.android.com/about/dashboards/index.html , it covers half of the market.

Is there any chance to have the print functionality for this component?

Thanks

QMG
13 Dec 2012, 8:05 PM
Doesn't seem to work on Android 4.2, this is a picture from my Nexus 7.

All garbled text, it works great on iOS and on my desktop browser though.

Any solutions or workarounds? Great framework otherwise..

http://i46.tinypic.com/169ncl1.png

hudibm
23 Dec 2012, 1:43 AM
i see it works in the browser locally but once i build production (cmd >> sencha app build production)
and upload it to my server it does not work. same issue like was mentioend above by 'morphew (http://www.sencha.com/forum/member.php?492794-morphew)'
but im not using a local file im using the pdf example you give (http://cdn.mozilla.net/pdfjs/tracemonkey.pdf).

hudibm
23 Dec 2012, 3:08 AM
i see it works in the browser locally but once i build production (cmd >> sencha app build production)
and upload it to my server it does not work. same issue like was mentioend above by 'morphew (http://www.sencha.com/forum/member.php?492794-morphew)'
but im not using a local file im using the pdf example you give (http://cdn.mozilla.net/pdfjs/tracemonkey.pdf).

when you build production using the sencha tools it does something to the file(processes/minifies) so i guess taht messes up something. once i remove the pdf.js path out of the SDK folder and out of the app.Json file and add it to the project after production it works great(dont for get to give the html file the correct path to pdf.js)

hudibm
23 Dec 2012, 3:40 AM
i cached teh pdf file. but if im off line it wont work. doesnt even get to the spinner.

frankie0515
5 May 2013, 4:42 PM
sorry,i'm try to package into android or iphone
but afrer i build app ,the pdf canvas just not working.
android will show an div (Hi Hi Hi),iphone just loading or crash
i try include the pdf.js outside the app.json ,but not work either
is this component can't build native app???

javier.ruiz
12 May 2013, 10:52 PM
I have the same problem than QMG, I can see the pdf page duplicated and the text very big!

jdockins
9 Jun 2013, 12:50 PM
when you build production using the sencha tools it does something to the file(processes/minifies) so i guess taht messes up something. once i remove the pdf.js path out of the SDK folder and out of the app.Json file and add it to the project after production it works great(dont for get to give the html file the correct path to pdf.js)
Thanks for this! I added the pdf.js path manually after production build and it finally works.

However, when I build through phonegap and deploy to Android, some of the pdfs are garbled like previously posted. But, it works great in iOS - both iPhone and iPad.

Does anyone know what causes the garbled image of the PDF on android?

jerrysolomon
12 Jul 2013, 5:29 AM
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

marco.marsala
7 Aug 2013, 5:55 AM
Hi. The demo is not working on IE10 because is using an old pdf.js version.

I’ve fixed by using the newest version of pdf.js (I cloned latest version from git repository then built with “node make generic” as explained in pdfjs site).

Still two issues with this component:

a) on IE10 you cannot scroll the PDF

b) using sencha app build the minification routine damages the pdf.js file. You can fix by manually overwriting, after every build (tedious!), the minified pdf.js with the unminified one from that you've built.

There is any app.json option to tell Sencha Cmd to not minify some .js files?

Thank you.

Dr. Marco Marsala
Network Solution srl
http://www.realizzazionesitigenova.it

marco.marsala
9 Aug 2013, 5:05 AM
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/showthread.php?269494-Disable-minification-on-some-files

SunboX
9 Sep 2013, 11:15 AM
short notice (haven't much time lately), I updated PDF.js to latest commit and Sencha Touch to 2.2.1

https://github.com/SunboX/st2_pdf_panel

greetings André

alanthales
16 Sep 2013, 1:31 PM
Hi!

This pdf viewer works with data uri scheme? Like this:



{
xtype: 'pdfpanel',
src: 'data:application/pdf;base64…zdGFydHhyZWYKMTk3OAolJUVPRg== (data:application/pdf;base64,JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1Jlc291cmNlcyAyIDAgUgovQ29udGVudHMgNCAwIFI+PgplbmRvYmoKNCAwIG9iago8PC9MZW5ndGggMjAzPj4Kc3RyZWFtCjAuNTcgdwowIEcKMTcwLjA3OSA1NTguNDI1IG0gCjE3MC4wNzkgNTAxLjczMyBsCjIyNi43NzIgNTMwLjA3OSBsCjE3MC4wNzkgNTU4LjQyNSBsCkIKMi44MyB3CjEuMDAgMC4wMCAwLjAwIFJHCjAuMDAgMC4wMCAxLjAwIHJnCjI4My40NjUgNTU4LjQyNSBtIAozMTEuODExIDU1OC40MjUgbAozNDAuMTU3IDQ3My4zODYgbAoyODMuNDY1IDU1OC40MjUgbApCCmVuZHN0cmVhbQplbmRvYmoKMSAwIG9iago8PC9UeXBlIC9QYWdlcwovS2lkcyBbMyAwIFIgXQovQ291bnQgMQovTWVkaWFCb3ggWzAgMCA1OTUuMjggODQxLjg5XQo+PgplbmRvYmoKNSAwIG9iago8PC9CYXNlRm9udC9IZWx2ZXRpY2EvVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKNiAwIG9iago8PC9CYXNlRm9udC9IZWx2ZXRpY2EtQm9sZC9UeXBlL0ZvbnQKL0VuY29kaW5nL1dpbkFuc2lFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iago3IDAgb2JqCjw8L0Jhc2VGb250L0hlbHZldGljYS1PYmxpcXVlL1R5cGUvRm9udAovRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nCi9TdWJ0eXBlL1R5cGUxPj4KZW5kb2JqCjggMCBvYmoKPDwvQmFzZUZvbnQvSGVsdmV0aWNhLUJvbGRPYmxpcXVlL1R5cGUvRm9udAovRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nCi9TdWJ0eXBlL1R5cGUxPj4KZW5kb2JqCjkgMCBvYmoKPDwvQmFzZUZvbnQvQ291cmllci9UeXBlL0ZvbnQKL0VuY29kaW5nL1dpbkFuc2lFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iagoxMCAwIG9iago8PC9CYXNlRm9udC9Db3VyaWVyLUJvbGQvVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTEgMCBvYmoKPDwvQmFzZUZvbnQvQ291cmllci1PYmxpcXVlL1R5cGUvRm9udAovRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nCi9TdWJ0eXBlL1R5cGUxPj4KZW5kb2JqCjEyIDAgb2JqCjw8L0Jhc2VGb250L0NvdXJpZXItQm9sZE9ibGlxdWUvVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTMgMCBvYmoKPDwvQmFzZUZvbnQvVGltZXMtUm9tYW4vVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTQgMCBvYmoKPDwvQmFzZUZvbnQvVGltZXMtQm9sZC9UeXBlL0ZvbnQKL0VuY29kaW5nL1dpbkFuc2lFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iagoxNSAwIG9iago8PC9CYXNlRm9udC9UaW1lcy1JdGFsaWMvVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTYgMCBvYmoKPDwvQmFzZUZvbnQvVGltZXMtQm9sZEl0YWxpYy9UeXBlL0ZvbnQKL0VuY29kaW5nL1dpbkFuc2lFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iagoyIDAgb2JqCjw8Ci9Qcm9jU2V0IFsvUERGIC9UZXh0IC9JbWFnZUIgL0ltYWdlQyAvSW1hZ2VJXQovRm9udCA8PAovRjEgNSAwIFIKL0YyIDYgMCBSCi9GMyA3IDAgUgovRjQgOCAwIFIKL0Y1IDkgMCBSCi9GNiAxMCAwIFIKL0Y3IDExIDAgUgovRjggMTIgMCBSCi9GOSAxMyAwIFIKL0YxMCAxNCAwIFIKL0YxMSAxNSAwIFIKL0YxMiAxNiAwIFIKPj4KL1hPYmplY3QgPDwKPj4KPj4KZW5kb2JqCjE3IDAgb2JqCjw8Ci9Qcm9kdWNlciAoanNQREYgMjAxMjA2MTkpCi9DcmVhdGlvbkRhdGUgKEQ6MjAxMzA5MTYxODQxMTQpCj4+CmVuZG9iagoxOCAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovUGFnZXMgMSAwIFIKL09wZW5BY3Rpb24gWzMgMCBSIC9GaXRIIG51bGxdCi9QYWdlTGF5b3V0IC9PbmVDb2x1bW4KPj4KZW5kb2JqCnhyZWYKMCAxOQowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDAzMzkgMDAwMDAgbiAKMDAwMDAwMTU2OCAwMDAwMCBuIAowMDAwMDAwMDA5IDAwMDAwIG4gCjAwMDAwMDAwODcgMDAwMDAgbiAKMDAwMDAwMDQyNiAwMDAwMCBuIAowMDAwMDAwNTE2IDAwMDAwIG4gCjAwMDAwMDA2MTEgMDAwMDAgbiAKMDAwMDAwMDcwOSAwMDAwMCBuIAowMDAwMDAwODExIDAwMDAwIG4gCjAwMDAwMDA4OTkgMDAwMDAgbiAKMDAwMDAwMDk5MyAwMDAwMCBuIAowMDAwMDAxMDkwIDAwMDAwIG4gCjAwMDAwMDExOTEgMDAwMDAgbiAKMDAwMDAwMTI4NCAwMDAwMCBuIAowMDAwMDAxMzc2IDAwMDAwIG4gCjAwMDAwMDE0NzAgMDAwMDAgbiAKMDAwMDAwMTc5MiAwMDAwMCBuIAowMDAwMDAxODc0IDAwMDAwIG4gCnRyYWlsZXIKPDwKL1NpemUgMTkKL1Jvb3QgMTggMCBSCi9JbmZvIDE3IDAgUgo+PgpzdGFydHhyZWYKMTk3OAolJUVPRg==)'
}

mob2
26 Sep 2013, 1:25 AM
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
26 Sep 2013, 4:33 AM
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
26 Sep 2013, 6:51 AM
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
29 Oct 2013, 4:06 AM
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
3 Dec 2013, 2:23 AM
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 (http://docs.sencha.com/architect/3/#!/guide/resources-section-JSRes) for Architect 3 & the resource options when using the build options, unless of course it's buried elsewhere.

mirkotus
17 Dec 2013, 5:50 AM
What is the easiest way to include this files in Sencha Architect 3.0 and make a pdf panel

WixSL
11 Mar 2014, 8:08 AM
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
17 Mar 2014, 10:20 AM
Can anyone help on this? At least a hint or an idea.

lstolz
11 Jun 2014, 6:30 AM
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
25 Jun 2014, 1:20 AM
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!

hudibm
25 Jun 2014, 3:26 AM
Im actually dont think it has to do with the size but more with the width/height and scaling of viewport and canvas..the default set in the 'SimpleViewer' doesnt display all pdfs. what changes have to be done for all pdfs to display

rfrancois
3 Jul 2014, 5:25 AM
Hello !

In first, thanks for this great work !

But I have a problem with the plugin, in Android 4.2 I see the PDF in double with a picture in background. How can I resolve this ?

Thanks in advance,
Romain FRANCOIS