CODEWITHSUNDEEP
androidangularjscordovaionic-framework
Mason Hollis
Mason Hollis

Reputation: 41

Show PDF downloaded from API in Ionic / Angular

I need to hit an API endpoint, which returns a pdf file (not a url to a pdf, but the actual data), then somehow display this pdf in my ionic application. Ideally, I'd like to just give it to some other application like the phone's mobile web browser but I'd be open to trying to embed it within my app as well. On iOS, I just use $window.open(url) and mobile safari knows to download and display the pdf that is returned. However, Android tries to download the file then tells me that it can't be opened when I try to open it.

I've also tried embedding it in the app with <embed> but nothing gets embedded. However, a similar method works with images in <img ng-src="url">.

I've also tried messing around with cordova FileOpener2 but am having a lot of trouble getting anything to work in that. If that's the right way to do this, I'd be open to re-visiting that method.

The closest I've gotten is definitely just sending it to the devices mobile browser as that works perfectly on iOS.

Upvotes: 2

Views: 1782

Answers (1)

Mason Hollis
Mason Hollis

Reputation: 41

I solved it using filetransfer and fileopener2. My code is below. The main issues I ran into was not having <access origin="cdvfile://*" /> in my config.xml file and not having ngCordova installed correctly.

if (ionic.Platform.isIOS())
  $window.open(APIUrl, '_blank', 'location=no');
else if (ionic.Platform.isAndroid()) {

  var fileExtension = filename.substr(filename.lastIndexOf('.')+1);

  //I have a dictionary with this somewhere else
  var MIMEType = extToMime[fileExtension];


  var uri = encodeURI(APIurl);
  var fileURL = "cdvfile://localhost/persistent/file."+fileExtension;

  $cordovaFileTransfer.download(uri, fileURL, {}, true)
  .then(function(result) {
    $cordovaFileOpener2.open(
      fileURL,
      MIMEType
    ).then(function() {
      console.log("SUCCESS");
    }, function(e) {
      console.log("ERROR");
      console.log(JSON.stringify(e));
    });
  }, function(e) {
    console.log("Error: " + JSON.stringify(e));
  });
}

Upvotes: 2

Related Questions