10

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

user3878988
  • 761
  • 3
  • 8
  • 20

6 Answers6

25

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

Community
  • 1
  • 1
Idan Adar
  • 44,156
  • 13
  • 50
  • 89
  • 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. – user3878988 Oct 14 '14 at 00: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). – Idan Adar Oct 14 '14 at 04: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. – user3878988 Oct 16 '14 at 18:27
  • The Google Docs viewer doesn't open links in android – Elia Weiss Jul 27 '15 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 – Mohan Gopi Jun 08 '17 at 13:18
  • @EliaWeiss is there any way to open a file path from android appended to google docs viewer. – Mohan Gopi Jun 09 '17 at 04:36
6

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.

Pang
  • 9,564
  • 146
  • 81
  • 122
coder2017
  • 330
  • 4
  • 9
  • 1
    Have you tried the '_system' solution, with a PDF, on Android to verify this works? – Brant Jun 06 '17 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. – billy_comic Feb 12 '20 at 20:30
5

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;
            }
    }
    });
Marc Magon
  • 713
  • 7
  • 11
  • 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. – JurgenBlitz Oct 06 '21 at 06:52
  • 1
    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 – Marc Magon Oct 07 '21 at 09: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. – JurgenBlitz Oct 08 '21 at 12:22
1

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.

Gideon Simons
  • 26
  • 2
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);
Styx
  • 9,863
  • 8
  • 43
  • 53
Pankaj Singh Sugara
  • 1
  • 1
  • 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://stackoverflow.com/a/38858040/1902598) – timbru31 Oct 18 '17 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); ` – Pankaj Singh Sugara Oct 25 '17 at 05:09
  • 1
    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: https://github.com/pwlin/cordova-plugin-file-opener2/issues/28#issuecomment-218442994 – timbru31 Oct 27 '17 at 11:15
0

It's working for me

window.open(link, "_blank","location=yes");
Siddhartha Mukherjee
  • 2,703
  • 2
  • 24
  • 29