How to show a pdf file in an ionic application without downloading

Question

What I've done:

• used by inappbrowser
• google document used
• used web browsing

so I tried all of these methods to show the pdf file on an Android device using ionic. But not to use, I can see the download button in all of these methods. Can someone tell me how I can display PDF without the download option for the user.

my code is:

<div class="col col-50 clsGrid" ng-click="showFile('http://www.orimi.com/pdf-test.pdf')"> </div> 

my pdf file is:

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 have tried all the ways. But unable to find a solution. If anyone knows this will be helpful. If any specialist in this, I can send my demo project for reference. Thanks in advance!

Answer 1

You will need to use ng-pdfviewer .

Directive for viewing in AngularJS PDF format using pdf.js.

 <button ng-click="prevPage()">&lt;</button> <button ng-click="nextPage()">&gt;</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; }; }]);