View PDF on an Android mobile app. Any ideas?

Hi,

Please try to update the following code to use base 64 url and let me know if it helps:

   var urlpath = 'Your URL';

   window.plugins.childBrowser.showWebPage(urlpath, { showLocationBar: true,showAddress :true});

Regards,

Ricardo

Hi Ricardo

Thanks for the quick reply.  I have not had chance to test with my base64 url but I have tried with a url that points to a pdf on the web. All it does is open up a browser window with the url in the address bar.  The screen contents are blank.  This is very similar to what I experienced with the window.open method.  I will try some more ideas tomorrow.

Thanks again

Yes, both approaches uses a browser to open a PDF within a mobile application.  The one I've sent you worked on a Workshop last year.  The actual code checks if you are running on IOS or Android.  If on IOS, I just open the URL with a browser.  If on Android, I had to use the plugin to invoke the URL with a different browser for it to work:

function open_pdf_file(){

    var devicetype = localStorage.getItem("lv_devicetype");

   if (devicetype == 'apple') {    

      window.plugins.childBrowser.showWebPage(urlpath, { showLocationBar: true,showAddress :true});

   }

   else {

      window.open(urlpath,'_system');    

   }

}  

The challenge I've found with opening the PDF with a browser on Android is that the default Android browser for a Mobile Application did not support PDF.  It seems that Android have more than one browser installed and when you call a URL from within a Mobile App, it opens with a Browser that don't support PDF.  If you go to the Browser Icon and paste the URL, that browser supports PDF.

Another way of doing that you might want to try:

getsatisfaction.com/.../navigate_to_link_pdf

Thanks for the feedback.  I had come across this link before posting on this forum.  I have not got around to trying it yet  but I will.  One problem I see with using the external URL is that a company internet policy may be in place that stops access to external web resources.

I'll let you know how I get on.

The URL don't need to be external to the device.  It can point to the local file on the Mobile. The challenge there is to find the exact path you are creating the file to pass it as a URL.

Regards,

Ricardo

Hi Ricardo

I was actually thinking about the google docs viewer being inaccessible due to company internet policies but i'm sure we can work around that.

Here's some feedback.  Various options have been tried with different results on different devices:

1. Showing the pdf within an iframe using an HTML component.  Works within the Chrome desktop browser on the PC but not on any android device.

2. Saving the file to the localFileSystem creates a pdf that can be opened on a Nexus 5 device but not on a cheap android 4.0 tablet.  Also works on the desktop with Chrome when a special startup switch to enable saving to the local file system is used.  

3. Using window.open("data:application/pdf;base64," + encodeURI(localStorage.getItem('loceDocData')),'_system'); works within Chrome on the desktop but not on the android devices.

Did all your tests work with an Apple product?  We don't currently have an Apple developer account but may need to investigate this in the future.

My ideal solution would be to view the PDF without using the localFileSystem but I just can't seem to find out how.  Time to tear my hair out I think! ;-)

Thanks again for you help

On IOS, it worked first time with no issues.  It actually looks really nice on IOS.

Where are you generating the PDF file?  On our app, we create the PDF on the backend and write it to a file in a directory inside the WebServer/Tomcat and just referenced it on the Mobile Client using a plain URL.  From what you are describing, it seems like you are transfering the PDF file to the client and than referencing it using BASE64 enconding.  Just curious if the BASE64 enconding might be impacting it process... 

All the best,

Ricardo

Yes I'm transferring the PDF to the client using BASE64 encoding.  The encoding/decoding seems to work fine,  I originally had problems with that area but I don't think it's that anymore due to the fact that the PDF opens on a nexus 5.  It seems to be some inconsistency with the webkit api on android devices for the localFileSystem problems and the fact that the built in browser called via windows.open does not support PDF files.  We pointed the client to a plain old URL that works on the desktop but not on android.

On Windows phone 7/8 device we used an ashx handler to generate the PDF and used adobe reader to view the PDF.

So much for using the mobile app builder to write the code once.  

Cheers

Hi dhubbuck,

Please try the following in your event handler:

   window.open("wibble.com/your.pdf", "_system");

I have just tried it on a couple of android devices and it seems to work - the first time, it asks whether you want to use your browser or Adobe Reader, and there is an option always to use your choice.

Hope this helps.

Sorry, just noticed a copy-and-pasting error.  Should be:

   window.open("wibble.com/your.pdf", "_system");

(Might work anyway.  I don't know.  I haven't tried it.)

Hi johncat,

I've tried using window.open(''url",'_system');  It was actually one of the first things i tried.  On my app on an android device it does not work.  On the desktop it does!  Not sure why?

Thanks for your input.

Some information that may help anyone else who needs to save a base64 encoded pdf locally.

I've found out that the phonegap filewriter api needs to be at version 2.9 to write binary files.  It expects an arrayBuffer to be passed into the write method.

I've used the following functions to convert the base64 string into the arrayBuffer.

developer.mozilla.org/.../Base64_encoding_and_decoding

Within MAB Ichnaged the libraries version to1.2 to pick up a later PhoneGap API.

Hope this helps someone in the future