Show pdf from url

1

Hi

I would like to open PDF file from a URL.

How can i detect and call the pdf reader of the device in order to show the downloaded pdf document?

I am trying https://github.com/pwlin/cordova-plugin-file-opener2.git for android and windows phone.

Thank´s in advance
Ângelo

2

Have you tried with the InAppBrowser plugin?

1 Like
3

First off, I am not sure if this is the best solution at all, but I needed a cross platform solution. In summary, I couldn’t use InAppBrowser with Android to display a PDF, so I had to download the PDF first and then open it natively. iOS is able to open a PDF using InAppBrowser, so I just use that.

/**(
 * @param url
 * Download the file from the associated url.
 */
$scope.openPDF = function(url){
	switch(devicePlatform){
		case 'Android':

			/**
			 * Android devices cannot open up PDFs in a sub web view (inAppBrowser) so the PDF needs to be downloaded and then opened with whatever
			 * native PDF viewer is installed on the app.
			 */

			var fileURL = cordova.file.externalApplicationStorageDirectory+"local.pdf";

			var fileTransfer = new FileTransfer();
			var uri = encodeURI( url );

			fileTransfer.download(
				uri,
				fileURL,
				function(entry) {
					$scope.data.localFileUri = entry.toURL();
					window.plugins.fileOpener.open(entry.toURL());
				},
				function(error) {

				},
				false
			);


			break;
		default:

			/**
			 * IOS and browser apps are able to open a PDF in a new sub web view window. This uses the inAppBrowser plugin
			 */
			var ref = window.open(url, '_blank', 'location=no,toolbar=yes,closebuttoncaption=Close PDF,enableViewportScale=yes');
			break;
	}
}

You might want to implement some sort of code that deletes the local copy of the PDF once it’s been viewed (I do that by adding a listener for “resume” and deleting the file ref stored in $scope.data.localFileUri

This uses the following plugins
org.apache.cordova.inappbrowser
org.apache.cordova.file
org.apache.cordova.file-transfer
com.phonegap.plugins.fileopener
org.apache.cordova.device (to get the device platform)

2 Likes
4

Thank´s for pointing the solution, i am still a newbye finding my way into ionic and angular.

Instead of deleting the last PDF, how would be implemented a feature to maintain one last copy of the downloaded pdf providing a button to open the last pdf and another to download a new one.

5

Just keep a record of the file URL somewhere (see above) and then call it when/if required. You could keep a list of files in local storage so the info is still available after closing and opening the app again.

window.plugins.fileOpener.open($scope.data.localFileUri);
6

Thank´s a lot again !

I do downloaded all the cordova plugins and i am trying to fit the openPdf function inside my pdf Controller.

I do not know if this is the right way into the Angular way, because the error message is : Error: [$injector:unpr] Unknown provider: $cordovaFileOpener2Provider ← $cordovaFileOpener2 ← PdfCtrl

Wich would be the correct steps

7

I try and it works at the pc for android and windows phone it does not work just show a blank window. is there any workaround for using inAppBrowser with windows phone and Android ?

8

Hi ! i am a newbie into ionic and angular, how do i declare the dependencies? in the controller module and the pdf controller ?

Wich is the format to declare this dependencies ?

With cordova plugin list i see all of them , but all my tryes gives me the unknow provider error message.

9

Hi there, sorry I didn’t realise you had already asked another question! See below for the fileopener plugin

ionic plugin add org.apache.cordova.file-transfer (will add org.apache.cordova.file as a dependency)
ionic plugin add org.apache.cordova.inappbrowser
ionic plugin add https://github.com/markeeftb/FileOpener.git (for com.phonegap.plugins.fileopener)

10

Hi!

With inapbrowser only it works, the pdf is downloaded, but i would like to detect a pdf reader and open it when the download finish.

I fall on the unknow provider error.

How do you declare these dependencies to avoid the unknow provider error ?

angular.module(‘starter.controllers’, [’???’])

In my controller i try to declare $cordovaFileOpener but shows the error message about unknow provider.

11

I didn’t have to declare any angular app dependencies, nor did I use $cordovaFileOpener anywhere I used

window.plugins.fileOpener.open(entry.toURL());

I’m not sure why you’re seeing what you’re seeing

12

It stops on var fileTransfer = new FileTransfer(); says Filetransfer is not defined, may i uninstall all the plugins and install them again.

13

I have this list of plugins :

com.phonegap.plugins.fileopener 0.1.0 "File Opener"
org.apache.cordova.file 1.3.3 "File"
org.apache.cordova.file-transfer 0.5.0 "File Transfer"
org.apache.cordova.inappbrowser 0.6.0 "InAppBrowser"

And a url that returns a pdf file.

After this just try to adapt the code :

 var fileURL = url             
      var fileTransfer = new FileTransfer();
      var uri = encodeURI( url );
      window.plugins.fileTransfer.download(uri, fileURL, function(entry) {
            $scope.data.localFileUri = entry.toURL();
            $scope.data.localFileUri = window.plugins.fileOpener.open(entry.toURL()); //entry.toURL();
        },        
        function(error) {
          console.log("Erro");
        }
      );

And return the message : ReferenceError: FileTransfer is not defined

Can not see the error! any ideas ?