CODEWITHSUNDEEP
pdfsencha-touch
knowledgequester
knowledgequester

Reputation: 172

Sencha Touch 1.1 - Display PDF in Panel

I'm building an application in Sencha Touch 1.1 for the iPad. How can I display a PDF in an Ext.Panel?

I've tried using both the embed and iframe elements by setting their src attribute to the PDF file. The iPad displays the PDF file but scrolling is disabled - i.e. I can see the first page of the PDF but can't scroll down to view the other pages.

Next I tried using window.open(url_to_pdf). This opens the PDF file in a new tab, which is OK if the user is browsing the application from Safari but if they have added the application to the Home screen, there isn't any concept of tabs: the user can see the PDF file (and scroll through it) but can't go back to the application.

I was briefly looking at rendering the PDF as HTML using this library: http://andreasgal.com/2011/06/15/pdf-js/ but it just seems like overkill.

Upvotes: 1

Views: 1867

Answers (2)

robob
robob

Reputation: 1749

It seems to me that the problem is little bit different. You can achieve the scroll (but with two fingers) on iPad Safari, but when you put the same code into an "html" field of an Ext.Panel this doesn't work.

Take this example:

<!DOCTYPE HTML>
    <html>
    <head>
      <title>Testing iFrames on iPad</title>
      <style>
      div {
        border: solid 1px green;
        height:100px;
      }

    .scroller{
        border:solid 1px #66AA66;
        height: 400px;
        width: 400px;
        overflow: auto;
        text-align:center;
    }
    </style>

</head>

<body>

    <table>
      <tr>
        <td><div class="scroller">
        <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
    </div>
        </td>
        <td><div class="scroller">
        <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
    </div>
        </td>
      </tr>
      <tr>
      <td><div class="scroller">
        <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
    </div>
        </td>
        <td>
        <div id="scroller" style="border:solid 1px #66AA66;
        height: 400px;
        width: 400px;
        overflow: auto;
        text-align:center;">
        <iframe src="http://ctan.mackichan.com/macros/latex/contrib/bibleref/samples/sample.pdf" width="100%" height="100%"></iframe>
        </div>
    </div>
        </td>
      </tr>
    </table>
    <div> Here are some additional contents.</div>
</body>
</html>

This works fine on iOS Safari, but if you try to get the last div and put into an Ext.Panel.html fields, it doesn't work!!

Do you have any idea about it? Sorry it's not a real answer, but it would have not been possible to put into a comment :)

Upvotes: 0

stan229
stan229

Reputation: 2607

Unfortunately you can not scroll anything inside a frame when using Safari (UIWebView) on the iPad.

iPad - cannot scroll inside frame

One thought would be if you have server side pdf generation is to generate a PDF that you know will fit the contents since you have a fixed resolution. You can take your one large PDF page and split it into multiple smaller pages. There should be a library for this in your server language. You can then leverage carousel or a tabpanel to let the user switch pages, kind of like reading a book.

Upvotes: 1

Related Questions