show PDF in an Ext.Container SENCHA TOUCH 2

Question

I am trying to show a pdf content in a Ext.Container of Sencha Touch 2. Tried several ways answered on SO but they all didn't work.

Few things tried, include:

Tried converting file content into html and extract the HTML inside the BODY tag and put it into Ext.XTemplate of the Container. This way I can only play cool with it, if HTML is being converted from a .doc file but if it was a .pdf file it messes up design because when I convert a pdf file into HTML then it adds position: absolute inside every DIV and with absolute position the parent element will not have any height and I am stuck with the scrolling issues.

for example:

<div style="position:relative;display:inline-block;;top:994px;left:712px;font-family:'Times New Roman';font-size:10pt;white-space:nowrap;">description</div>

Second try, 2. Tried putting PDF into IFRAME and EMBED tags as a link and put them into the Ext.XTemplate but these tags are also not working in mobile.

for example:

<embed type="application/pdf" width="800px" height="800px" src="example.pdf" />

<iframe style="position:absolute; z-index: 1; left: 0; top: 0;" width="100%" height="2000" src="example.pdf"></iframe>

Please give some idea how to display/open PDF(or its content, with atleast few formatting). Or do we have any plugin to display it. One final solution is showing using google docs but my initial requirement is showing PDF content in sencha touch 2 app not using any third party service(like google docs).

Amar1989 Amar1989 · Accepted Answer · 2015-02-12T09:43:11

you can use inapp browser plugin for opening file in the iOS:

install inappbrowser cordoav plugin and open file like this:

function openPDF(){
        ref = window.open('http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf', '_blank', 'location=no');
        ref.addEventListener('exit', function() {
            ref.removeEventListener('exit', function(){});
            ref.close();
        } );
    }

show PDF in an Ext.Container SENCHA TOUCH 2

2 Answers