Open PDF in the PhoneGap App that is made in HTML and CSS

Question

I have a strange problem with my iPad App in Phone Gap. The problem is that I have to open PDF document in my app through links and when I click the link which opens the PDF, it shows me the PDF document with no back link.

Hence, when I open the PDF document in my app through a link, it takes me to a dead end and there is no way I can go back to the main page of my app.

My question is that how can I have a Top-Bar, when I open a PDF which could take me back to my home page? Any internal element for the iPad may be?

Thanks a lot.

Answer 1

Try using the In App Browser plugin.

If you're using a later Phonegap / Cordova version (2.8.0, 2.9.0 etc) it should come with it - nothing else to install.

http://docs.phonegap.com/en/2.9.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser

It will allow you to open the PDF in the a new 'window' that overlays your app. It has a 'Done' button that users can use to close it and return to your app when they are finished.

You would open the PDF using the In-App Browser, using something like this:

window.open('http://whitelisted-url.com/pdftoopen.pdf', '_blank');

I.e. the _blank option triggers the In-App Browser plugin. If you were to use _system instead it might open it in iBooks (just guessing there - not 100% sure if it would use iBooks).

Answer 2

Try prefixing https://docs.google.com/viewer?url= in the URL

like, window.open('https://docs.google.com/viewer?url=http://www.example.com/example.pdf&embedded=true', '_blank', 'location=yes');

Answer 3

Try this to open any kind of documents from URL using following steps:

• install this plugin : cordova plugin add https://github.com/ti8m/DocumentHandler

• use this code :

  handleDocumentWithURL(function() { console.log('success'); }, function(error) { console.log('failure'); if (error == 53) { console.log('No app that handles this file type.'); } }, 'http://www.example.com/path/to/document.pdf');

It works for me both on Android and IOS. I used it for open images and PDF files.

Android : It opens files using system apps if available, otherwise it give an error, which you can handle.

IOS : It opens files in popup like view with Done button and Option button.

It doesn't show your docs URL.

Source is available here : https://github.com/ti8m/DocumentHandler