View PDF on an Android mobile app. Any ideas? - Forum - Mobile - Progress Community

View PDF on an Android mobile app. Any ideas?

 Forum

View PDF on an Android mobile app. Any ideas?

  • Hi All,

    I have been playing around with the mobile app builder to test some of the features that we would use in a real world app.

    After successfully using the OERealm security features to authenticate against a user table within our OpenEdge database I moved on to create an app that would allow a user to view a PDF.  The PDF in the sample was successfully transferred using a CLOB temp-table field.

    When I tested the app using a desktop browser the pdf displayed correctly using the following javascript 

    window.open("data:application/pdf;base64," + escape(localStorage.getItem('loceDocData')),'_system');

    Also opening a URL to a PDF file, using the navigate to link event, worked correctly when testing on the desktop browser.

    When an APK file is exported and installed on an android device the PDF does not display using any of the above methods.

    I have stumbled across a thread that recommends using the google docs viewer URL.

    Does anyone know any other ways to view a PDF?  

    Is it possible to store the stream as a file and call adobe reader?

    Thanks in advance

  • 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