Add pdf to a panel

[mw1990]

Hey,

Im trying to add a pdf file to a panel. My code looks like this now:

subjectpanel = new Ext.Panel({
        floating: true,
        scroll: 'both',
            modal: true,
                centered: true,
            width: '90%',
            height: '90%',
            html: '<iframe width="100%" height="100%" src="data/pdf/subject3.1.pdf" ></iframe>'
    });

So, in Chrome everything works fine, in safari the files are downloaded to the pc and in the ipad simulator it wont render.

I have tried a solution I found on the forum, this involved google docs. This is not the best option because the app is going to get used offline alot.

Thanks in advance.

[mitchellsimoens]

It's up to the mobile device on how it handles PDF.

[mw1990]

So there is no standarized code to handle a pdf in Sencha?

[mitchellsimoens]

So there is no standarized code to handle a pdf in Sencha?

It's not up to Sencha Touch whether or not the browser is capable of displaying a PDF document... it's up to the browser.

[armode]

It's not up to Sencha Touch whether or not the browser is capable of displaying a PDF document... it's up to the browser.

Of course, that's right, but the iPhone Browser is able to display PDFs for example if you call window.open(PDF)!
Everything works fine, pinch/zoom, rendering, ... But how to get this work inside a panel?
There is a workaround to use an iFrame, but then you have trouble with scrolling, zooming, etc. Here's a working example for an iFrame
I tried to use this code inside a panel, but it doesn't work:

        var panel = new Ext.Panel({
            id: 'PDFPanel',
            layout: 'fit',
            scroll: 'both',
            html: '<div id="scroller" style="height: 500px; width: 100%; overflow: auto;"><iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="URL" /></div>',
            listeners: {
                beforeshow: function() {
                            setTimeout(function () {
                              var startY = 0;
                              var startX = 0;
                              var b = document.body;
                              alert('Body added!');
                              b.addEventListener('touchstart', function (event) {
                                  parent.window.scrollTo(0, 1);
                                  startY = event.targetTouches[0].pageY;
                                  startX = event.targetTouches[0].pageX;
                              });
                              b.addEventListener('touchmove', function (event) {
                                event.preventDefault();
                                var posy = event.targetTouches[0].pageY;
                                var h = parent.document.getElementById("scroller");
                                var sty = h.scrollTop;


                                var posx = event.targetTouches[0].pageX;
                                var stx = h.scrollLeft;
                                h.scrollTop = sty - (posy - startY);
                                h.scrollLeft = stx - (posx - startX);
                                startY = posy;
                                startX = posx;
                              });
                            }, 1000);
                }
            }
        });

I would appreciate your help!

[mw1990]

Hey,

I fixed it with two solutions, one for chrome and 1 for safari. For chrome i have an iframe, with the pdf inside it. For safari I have a div with the pdf as an image.

this is my code:

var pdfurl = [];
  if (App.browser == "Safari") {
    console.log('Safari')
     pdfurl = ['<div class="pdf"><img src="data/pdf/' + target.id + '.pdf" width="100%" /></div>'];
      }else if (App.browser == "Chrome"){
        console.log('Chrome');
        pdfurl = ['<iframe src="data/pdf/' + target.id + '.pdf" width="100%" height="100%"></iframe>'];
}

[armode]

Thanks for your reply!

But pinch to zoom doesn't work, right?

[youmi]

Hi everyone,

I have tried the solution of putting the pdf inside an image tag but on my ipad it only displays the first page of the pdf document.
Do I need to add something in order to scroll through the whole document.


Thanks

[mw1990]

You cant scroll. Due to this problem I have implemented the Google Docs PDF viewer. This is a very nice viewer, does all the things the pc version can do.

Hope this helps

[youmi]

My problem is that my application will be used offline and the pdf files will be stored locally.