Not able to launch a pdf file in inappbrowser in android

Question

I have a requirement to show a pdf in inappbrowser when user clicks on a link. It is working fine in ios but not working on android. I am using IBM worklight for my project. Below is the code I have used:

window.open("pdfURL","_blank","location=yes");

In ios the inappbrowser launches and displays the pdf but in android the inappbrowser is launches but no content is displayed

Solution 1

Unlike iOS, which has a built-in PDF viewer - Android's webview does not have PDF viewer built-in.
This is why it is going to fail in Android.

You have 2 choices in Android:

1. View the file using Google Docs by storing the file at a remote server and redirecting the user like so: window.open(encodeURI('https://docs.google.com/gview?embedded=true&url=http://www.your-server.com/files/your_file.pdf'), '_blank', 'location=yes,EnableViewPortScale=yes');

2. Or use a Cordova plug-in. For example this one (you can search in Google for more). For this, you'll need to learn how to create Cordova plug-ins in Worklight.

You can read more options here: Phonegap InAppBrowser display pdf 2.7.0

Solution 2

Try using

window.open('pdfURL',"_system","location=yes,enableViewportScale=yes,hidden=no");

where using _system will download the file and open it in the system's application like Chrome or other PDF viewers.

Solution 3

Use uriEncodeComponent(link) and https://docs.google.com/viewer?url= link

Doc, Excel, Powerpoint and pdf all supported.

Use the cordova in app browser.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    window.open = cordova.InAppBrowser.open;
        }

            $("body").on("click",function(e){
           var clicked = $(e.target);
         if(clicked.is('a, a *'))
       {
             clicked = clicked.closest("a");
             var link = clicked.attr("href");
            if(link.indexOf("https://") !== -1)
           {
               if(true) //use to be able to determine browser from app
                 {
                    link = "http://docs.google.com/viewer?url=" +  encodeURIComponent(link) + "&embedded=true";
             }

                 window.open(link, "_blank", "location=no,toolbar=no,hardwareback=yes");
                return false;
            }
    }
    });

Solution 4

Using google drive viewer seems like a good quick option.

But moving forward they may change or depreciate their API and you will have to find a new way to support this. Also security is another consideration here as your file is publicly available and downloadable.

I had a similar situation in a recent project and we solved it by using: pdf.js

This is a JS based PDF parser with a good set of reader functionalities.. its not as smooth as a native one but did the job for us. It's main advantage is that we had the control over the codes and were able to open files from the device file system.

If you want to go for a more native like in-app route, then as @Idan Adar mentioned a native library + cordova plugin is the way to go.

View more solutions