Not able to launch a pdf file in inappbrowser in android

Asked 10/10, 2014 at 17:17 Answered 21/6, 2021 at 11:54

Solved javascript jquery cordova ibm-mobilefirst phonegap-plugins

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

Melpomene answered 10/10, 2014 at 17:17 Comment(2)

Can you share the logs/error? – Tourist 10/10, 2014 at 17:22

I am not getting any errors. The inappbrowser is launching the url but somehow it is not able to display/download the pdf from that link. – Melpomene 10/10, 2014 at 17:27

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:

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');
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

Abound answered 11/10, 2014 at 4:6 Comment(6)

Thanks for the answer. I tried 1st option, but when I use this code I am seeing html content/code in inappbrowser instead of pdf file. Let me know if I have to do any other code changes for first option to work. Thanks. – Melpomene 14/10, 2014 at 0:26

I have tried this myself using this for testing:

window.open(encodeURI('https://docs.google.com/gview?embedded=true&url=http://kmmc.in/wp-content/uploads/2014/01/lesson2.pdf'), '_blank', 'location=yes,EnableViewPortScale=yes');

and it worked fine. Make sure you store the PDF in a public file server (not in the Worklight Server). – Abound 14/10, 2014 at 4:38

When I do this by replacing my pdf url the session cookies are getting lost, because of which it is displaying the session timeout page jsp code src. In order to have a work around, I would like to download the pdf as it does in android browser. When I run my application in android browser and click on pdf link it opens new tab and downloads the pdf. Is it possible to do the same from android web view using phonegap/worklight. Thanks. – Melpomene 16/10, 2014 at 18:27

The Google Docs viewer doesn't open links in android – Alula 27/7, 2015 at 10:32

'https://docs.google.com/gview?embedded=true&url=http://www.your-server.com/files/your_file.pdf this will work if we don't need headers if we have headers to append this witht he url i have saved to pdf usind file-transfer plugin and then appended the path with the url path but getting error not able to find is there any other way to show the local pdf file in inappbrowser @IdanAdar – Ary 8/6, 2017 at 13:18

@EliaWeiss is there any way to open a file path from android appended to google docs viewer. – Ary 9/6, 2017 at 4:36

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.

Beverie answered 14/3, 2017 at 4:59 Comment(2)

Have you tried the '_system' solution, with a PDF, on Android to verify this works? – Areta 6/6, 2017 at 11:47

This resolved the issue for me. While I think it may be abusing this setting, it seems to work for me (in a dev/debug app) and will report anything different when a signed APK is deployed. – Distinctly 12/2, 2020 at 20:30

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;
            }
    }
    });

Ence answered 24/8, 2016 at 1:45 Comment(3)

Note that this solution will not work if the intent is to open the PDF from the device's storage- it will result in a blank screen with no console error. It might work as expected using the device's browser. – Tribesman 6/10, 2021 at 6:52

I don't believe you would ever use the inappbrowser to display a pdf that exists on the device already? That doesn't make much sense I don't think – Ence 7/10, 2021 at 9:23

It is not the usual way to go, yes, but the project I am currently working on is doing this to overcome the zoom and aspect ratio limitations that some pdf libraries such as ng2-pdf-viewer can bring along. Works great in iOS, but not in Android. – Tribesman 8/10, 2021 at 12:22

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.

Outhaul answered 16/12, 2014 at 9:13 Comment(0)

Try this code it's working fine for me.

var inAppBrowserRef;
var target = "_system";
var options = "location=yes,hidden=no,enableViewportScale=yes,toolbar=no,hardwareback=yes";
inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);

Alignment answered 6/10, 2017 at 7:15 Comment(3)

This leads to

InAppBrowser: Error loading url file:///android_asset/www/assets/pdf/my.pdf:android.os.FileUriExposedException: file:///android_asset/www/assets/pdf/my.pdf exposed beyond app through Intent.getData()

for me, mostly because of the enhanced security measures in API Level 24+ (see https://mcmap.net/q/48971/-android-os-fileuriexposedexception-file-storage-emulated-0-test-txt-exposed-beyond-app-through-intent-getdata) – Theron 18/10, 2017 at 10:57

InAppBrowser: Error loading url : This is pdf url which you want to open Use below updated code :

code var url ="www.abc.com/abc/xyz.pdf"; var inAppBrowserRef; var target = "_system"; var options = "location=yes,hidden=no,enableViewportScale=yes,toolbar=no,hardwareback=yes"; inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);

– Alignment 25/10, 2017 at 5:9

Thanks for the update, but our PDF is bundles with the app, there is no external website we can link to. Fixed the issue by following this workaround: github.com/pwlin/cordova-plugin-file-opener2/issues/… – Theron 27/10, 2017 at 11:15

It's working for me

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

Science answered 21/6, 2021 at 11:54 Comment(0)

Recommended topics

Hot tags