Phonegap InAppBrowser display pdf 2.7.0

Marc Ster picture Marc Ster · May 28, 2013 · Viewed 55.5k times · Source

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

Marc Ster picture Marc Ster · May 30, 2013

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