Phonegap InAppBrowser display pdf 2.7.0

Question

I want to display an external PDF with the phonegap InAppBrowser in Android, but it isn´t working.

This is my JS code:

<script>
function openPDF() {
     var ref = window.open('http://www.i-drain.net/userfiles/file/einbauanleitung_iboard.pdf', '_blank', 'location=yes');
     ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
     ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
     ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
     ref.addEventListener('exit', function(event) { alert(event.type); });
}


</script>

I want to open the pdf after clicking on a image so i use this html code:

 <a href="#" onclick="openPDF()" >
   <img src="images/button.png">
 </a>

Answer 1

For everybody who is stuck with this problem here is what i´ve finally found out:

HTML 5 object tag: not working

Embedded tag: not working

childBrowser Plugin: I think it would work, but it is designed for the 2.0.0 version. So you´ll get a lot of errors so i didn´t get it to work.

Phonegap InAppViewer: If you use it like that:

window.open('http://www.example.com/test.pdf', '_blank', 'location=yes')

it wont work. The InAppViewer can´t open PDF, it doesn´t matter if the PDF is external or local stored.

My solutions so far (not what the actual idea was):

you can call the window function with _system. like that:

window.open('http://www.example.com/test.pdf', '_system', 'location=yes')

this will open the PDF in the normal Browser and download it. After downloading it will ask if it should open it with a PDF viewer. But you have to go back to your app and open it again after that.

Another possibility would be that you just download it to your sdcard with the Phonegap Filesystem API like that:

var fileTransfer = new FileTransfer();
fileTransfer.download(
"http://developer.android.com/assets/images/home/ics-android.png",
"file://sdcard/ics-android.png",
function(entry) {
    alert("download complete: " + entry.fullPath);
},
function(error) {
    alert("download error source " + error.source);
    alert("download error target " + error.target);
    alert("upload error code" + error.code);
});

The last thing i´ve found out is, to use Google docs/drive to open it with the InAppViewer linked to google docs like that:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {

window.open('https://docs.google.com/viewer?url=http://www.example.com/test.pdf&embedded=true', '_blank', 'location=yes'); 
ref = window.open('index.html', '_self');
 }

This will open the PDF in the app viewing it on google docs. You can generate your permalink here: https://docs.google.com/viewer So even if you change your pdf file, it will still work

I hope this summary will help you save time. If there is another solution let me know

Answer 2

Android has no native PDf viewer capability in their browser (unlike iOS' Safari). As far as I can see there are two nice options:

1. Skip downloading entirely and show the pdf via the online view capabilities of Google Doc Viewer, as stated in this StackOverflow answer

2. DO download the file and use the FileOpener plugin for Android Phonegap apps as explained in this StackOverflow answer. This will either open the file in the installed PDF reader or present the user with a choice.

I've written some stuff on downloading and showing a PDF on iOS and these options I showed in my blog post for Android Phonegap developers.

Answer 3

Try in this way it will work.

var ref = window.open('http://docs.google.com/viewer?url=http://www.i-drain.net/userfiles/file/einbauanleitung_iboard.pdf', '_system', 'location=yes');

Answer 4

The answer of Marc Ster is very comprehensive. However, the approach to open the pdf with google docs requires the user to login with their google account.

If you are displaying pdfs that are located on a server that is your own you can avoid this and use the following approach: You can setup the PDF.js library on your server. It is the open source project that also google docs are based on to view PDFs in a web browser.

You can then use the InAppBrowser Plugin to head onto your server where the PDF.js lies, specifying a path for the pdf to display in the URL. The pdf should also be on your server, to avoid having CORS issues. If it is an external pdf, you could write a workaround, as stated here.

You might display a pdf client side with code similar to this (using the InAppBrowser plugin)

var fileName = "myPdfOnMyServer.pdf";
var url = encodeURIComponent('files/uploads/' + fileName);
var ref = window.open(
         'https://www.<my website>.com/pdfjs-1.0.10XX-dist/web/viewer.html?file='
         + url,
         '_blank',
         'location=no,closebuttoncaption=Close,enableViewportScale=yes');

Answer 5

Android webview does not have PDF viewer built-in. Redirect user to Google doc viewer example: http://docs.google.com/viewer?url=http://example.com/example.pdf

Answer 6

Try this to open any kind of documents from URL using following steps:

• install this plugin : cordova plugin add https://github.com/ti8m/DocumentHandler

• use this code :

  handleDocumentWithURL(function() { console.log('success'); }, function(error) { console.log('failure'); if (error == 53) { console.log('No app that handles this file type.'); } }, 'http://www.example.com/path/to/document.pdf');

It works for me both on Android and IOS. I used it for open images and PDF files.

Android : It opens files using system apps if available, otherwise it give an error, which you can handle.

IOS : It opens files in popup like view with Done button and Option button.

It doesn't show your docs URL.

Source is available here : https://github.com/ti8m/DocumentHandler

Answer 7

I tried it having the script in the same file of the html and it worked for me, the only change was that i added the "alt" attribute at the image:

 <html lang="en">

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <a href="#" onclick="openPDF()" >
   <img alt="aaa" src="images/button.png">
 </a>
    </body>
</html>
<script>
function openPDF() {
     var ref = window.open('http://www.i-drain.net/userfiles/file/einbauanleitung_iboard.pdf', '_blank', 'location=yes');
     ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
     ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
     ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
     ref.addEventListener('exit', function(event) { alert(event.type); });
}


</script>

Answer 8

function openPDF() {
     var ref = window.open('http://docs.google.com/viewer?url=http://www.i-drain.net/userfiles/file/einbauanleitung_iboard.pdf', '_system', 'location=yes');
     ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
     ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
     ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
     ref.addEventListener('exit', function(event) { alert(event.type); });
}