Cannot open PDF file in Cordova/Ionic app? after download it


#1

I’m trying to open a PDF file in my app which I’m building with Ionic. I understand that I can do that using the inAppBrowser.

I first get the PDF from an api endpoint, after which I write it to the filesystem. Once it is written to the file system, I want to open it using the inAppBrowser. The code I have now is as follows:

Controller:

var exampleApp = angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

exampleApp.controller("FileController", function($scope, $ionicLoading) {
$scope.download = function() {
    $ionicLoading.show({
      template: 'Loading...'
    });
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
        fs.root.getDirectory(
            "ExampleProject",
            {
                create: true
            },
            function(dirEntry) {
                dirEntry.getFile(
                    "khatima.pdf", 
                    {
                        create: true, 
                        exclusive: false
                    }, 
                    function gotFileEntry(fe) {
                        var p = fe.toURL();
                        fe.remove();
                        ft = new FileTransfer();
                        ft.download(
                            encodeURI("http://www.tafseer.info/phocadownload/copy_of_the_book/khatima.pdf"),
                            p,
                            function(entry) {
                                $ionicLoading.hide();
                                $scope.imgFile = entry.toURL();
                            },
                            function(error) {
                                $ionicLoading.hide();
                                alert("Download Error Source -> " + error.source);
                            },
                            false,
                            null
                        );
                    }, 
                    function() {
                        $ionicLoading.hide();
                        console.log("Get file failed");
                    }
                );
            }
        );
    },
    function() {
        $ionicLoading.hide();
        console.log("Request for filesystem failed");
    });
}
 
$scope.load = function() {
    $ionicLoading.show({
      template: 'Loading...'
    });
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
        fs.root.getDirectory(
            "ExampleProject",
            {
                create: false
            },
            function(dirEntry) {
                dirEntry.getFile(
                    "khatima.pdf", 
                    {
                        create: false, 
                        exclusive: false
                    }, 
                    function gotFileEntry(fe) {
                        $ionicLoading.hide();
						var ref = fe.toURL();
                        $scope.pdfFile = cordova.InAppBrowser.open(ref, '_system', 'location=no');
                    }, 
                    function(error) {
                        $ionicLoading.hide();
                        console.log("Error getting file");
                    }
                );
            }
        );
    },
    function() {
        $ionicLoading.hide();
        console.log("Error requesting filesystem");
    });
}
});

View :

<body ng-app="starter">
    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">Ionic Blank Starter</h1>
        </ion-header-bar>
        <ion-content ng-controller="FileController">
            <button class="button" ng-click="download()">Download</button>
            <button class="button" ng-click="load()">Load</button>
            {{pdfFile}}
            <img ng-src="{{pdfFile}}">
        </ion-content>
    </ion-pane>
</body>

#2

any updates !!

Any helps ?


#3

you don’t have to do the above again for opening the file. just store the location in scope variable when you download and give that location to inappbrowser when you read from there.

if you are using android, it will not open pdf in browser as android lacks native pdf parser. you would need to open a pdf file in a pdf reader on android. in case of ios inappbrowser would be able to work properly.


#4

So what can do, Can you edit my controller ? its for android and IOS