how to show pdf file in ionic app with out download - html

Question

Things i did :
used inappbrowser
used google doc
used webview
so i have tried all these methods to show the pdf file in android device using ionic. But no use, i can see the download button in all these methods. Can any one tell me how can i display pdf without download option for user.
my code :
<div class="col col-50 clsGrid" ng-click="showFile('http://www.orimi.com/pdf-test.pdf')">
</div>
my pdf file :
http://www.orimi.com/pdf-test.pdf
My JS :
$scope.showModal = function(templateUrl) {
$ionicModal.fromTemplateUrl(templateUrl, {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$ionicLoading.show({
duration: 1000
});
$scope.modal = modal;
$scope.modal.show();
});
}
// Close the modal
$scope.closeModal = function() {
$scope.modal.hide();
$scope.modal.remove()
};
$scope.showFile = function(FileUrl) {
var file = FileUrl;
console.log(file);
//var openurl = cordova.InAppBrowser.open(file, '_blank');
// var openurl = cordova.InAppBrowser.open(file,'_blank', 'location=yes');
// var openurl = cordova.InAppBrowser.open("https://docs.google.com/viewer?url=" + file, '_blank');
// var openurl = cordova.InAppBrowser.open('https://docs.google.com/viewer?url=http://www.orimi.com/pdf-test.pdf&embedded=true', '_blank');
//window.open("https://docs.google.com/viewer?url=http://www.orimi.com/pdf-test.pdf&embedded=true",'_blank');
var openurl = cordova.InAppBrowser.open('https://docs.google.com/viewer?url=http://www.orimi.com/pdf-test.pdf&embedded=true&toolbar=0&navpanes=0&scrollbar=0', '_blank');
}
I tried all ways. But not able to find the solution.If any one know it will be usefull.If any expert in this, i can send my demo project for reference .
Thanks in advance !

Answer 1

You will need to use ng-pdfviewer.
AngularJS PDF viewer directive using pdf.js.
<button ng-click="prevPage()"><</button>
<button ng-click="nextPage()">></button>
<br>
<span>{{currentPage}}/{{totalPages}}</span>
<br>
<pdfviewer src="test.pdf" on-page-load='pageLoaded(page,total)' id="viewer"></pdfviewer>
and in your AngularJS code:
var app = angular.module('testApp', [ 'ngPDFViewer' ]);
app.controller('TestCtrl', [ '$scope', 'PDFViewerService', function($scope, pdf) {
$scope.viewer = pdf.Instance("viewer");
$scope.nextPage = function() {
$scope.viewer.nextPage();
};
$scope.prevPage = function() {
$scope.viewer.prevPage();
};
$scope.pageLoaded = function(curPage, totalPages) {
$scope.currentPage = curPage;
$scope.totalPages = totalPages;
};
}]);