How to open external pdf url in app

#1

can any one tell me how to open external pdf in ionic app…

Open PDF file in ionic native app ( ios and android) PLS HELP ME
#2

The way i have done this is using phonegap InAppBrowser plugin. simple and sweet :slight_smile:

1 Like
#3

can you give me the example so i will try…

#4
  1. Install this plugin https://github.com/apache/cordova-plugin-inappbrowser/blob/8ce6b497fa803936784629187e9c66ebaddfbe1b/doc/index.md

  2. Function to open link inside inAppBrowser. This can be any link like html, image or pdf. In case of android we use GoogleDocs to open pdf file as by default android browser does not support pdf viewing. iOS is smart enough to handle pdf itself as usual :slight_smile: .

Example :

 $scope.view_link = function (url, link_type) {
            if (ionic.Platform.isAndroid()) {
                if (link_type !== undefined && link_type !== null) {
                    if (link_type.toLowerCase() !== 'html') {
                        url = 'https://docs.google.com/viewer?url=' + encodeURIComponent(url);
                    }
                }
            }
            var ref = window.open(url, '_blank', 'location=no');
        }
9 Likes
File download (pdf)
#5

wow thank you… also can you help me on page load i want to open pdf in ionic.

#6

This is kind of very difficult because if you directly open a link in your app then it does works, but the problem is that there is no way to go back as there is no back button. This is where inAppBrowser comes in picture having ‘DONE’ button.

Will recommend to use inAppBrowser for ur task, but yes there is chance that you open a Link inside iFrame providing custon UI to close iFrame etc… I didn’t tried iFrame in iOnic app tho :wink:

#7

Hi,
i used iframe pdf is opening in my laptop in browser when im doing ionic serve. but i installed apk in mobile it is not opening… can you help below my iframe and controller code.
in html page
<iframe ng-src="{{pdfurl}}" style="width:100%; height: 1100px;"></iframe>

in controller…
$scope.pdfurl =$sce.trustAsResourceUrl(‘https://docs.google.com/viewer?url=’ + encodeURIComponent($scope.pdf));

#8

How do you open local files on an android device.

#9

@jswebtech have you finally found a solution about this ?

#10

@jerrybels yes i got solution…

#11

@jswebtech could you explain your solution?

#12

@missile here is my controller…

.controller(“IncSalesPdfCtrl”, [’$scope’,’$http’,’$stateParams’,’$sce’,’$ionicLoading’,
function($scope, $http, $stateParams,$sce,$ionicLoading)
{
$ionicLoading.show({ template: ‘Loading…’ })
var cid = $stateParams.DocKey
//console.log(cid);
var incsalespurl='http://tmcs.no-ip.info:83/iAutoCount/AutoCountReport.svc/json/GetSalesDocument?dbName=5bvq9pq8EokHTf+uB/yLD61bh48juTfB/Up19EK4bks=&uDId=d2CISC2oLtdTBGx1gji36fEKYt26vjLyY7h0ngIxj5QfkdjTQBXJRrgjHJCB0WtM&docType=SO&docKey=’+cid
$http.get(incsalespurl,{cache:true}).success(function(data){
$scope.salesrow = data.GetSalesDocumentResult;
$scope.pdfurl=$sce.trustAsResourceUrl(“http://docs.google.com/gview?embedded=true&url=http://tmcs.no-ip.info:83” + $scope.salesrow.Path + “.pdf”);

  		$ionicLoading.hide()		
  	}); 
  }]

)

#13

You used the Google Docs renderer… That’s what I ended up with as well. Thanks

#14

thank you for your code

#15

I tried this example but it didn’t work in my android app when i click on that link nothing it showing just the same page itself it contains. please help me out

#16

hi,
can u help me,
my pdf name Govt.pdf in ionic framework app i used it in html code its a link,
it will open when i run in browser because its present in img/ folder but after i install apk file into my mobile when i click the link it popups 'this file could not be access. check the locatio or network’
i understood it will bot download.
But i dont know how to do in ionic am new to ionic and angularJs can you help me come out of this…

#17

did you find solution for this. i am also having requirement to not download pdf

#18

I have tried but when i have installed the plugin i recive the error 404 from th link https://registry.npmjs.org/org.apache.cordova.inappbrowser

#20

nice!!! thank you!!! ios the best android bad)))

#21

how to make it work in ionic3 ? i tried every method but all in vain