@Kotshgfx wrote:
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>
Posts: 1
Participants: 1