How to Display PDF (Blob) on iOS Sent from My Angularjs App

How to display PDF (Blob) on iOS sent from my angularjs app

None of the solutions proposed above did work for me.

The main issue comes from URL that wasn't retrieved correctly in iOS. The following code do the correct work :

window.URL = window.URL || window.webkitURL;

Also even with this, it did not work on Chrome iOS, neither Opera iOS...so after digging the internet and inspired with the following questions :

• Blob createObjectURL download not working in Firefox (but works when debugging)
• How to open Blob URL on Chrome iOS
• Display blob (.pdf) in an angular app

... I finally ended up with the following code (working on all iOS browsers except FF on iOS) :

if (window.navigator.msSaveOrOpenBlob) { //IE 11+
  window.navigator.msSaveOrOpenBlob(blob, "my.pdf");
} else if (userAgent.match('FxiOS')) { //FF iOS
  alert("Cannot display on FF iOS");
}
} else if (userAgent.match('CriOS')) { //Chrome iOS
  var reader = new FileReader();
  reader.onloadend = function () { $window.open(reader.result);};
  reader.readAsDataURL(blob);
} else if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) { //Safari & Opera iOS
  var url = $window.URL.createObjectURL(blob);
  window.location.href = url;
}

How to Display blob (.pdf) in an AngularJS app

First of all you need to set the responseType to arraybuffer. This is required if you want to create a blob of your data. See Sending_and_Receiving_Binary_Data. So your code will look like this:

$http.post('/postUrlHere',{myParams}, {responseType:'arraybuffer'})
  .success(function (response) {
       var file = new Blob([response], {type: 'application/pdf'});
       var fileURL = URL.createObjectURL(file);
});

The next part is, you need to use the $sce service to make angular trust your url. This can be done in this way:

$scope.content = $sce.trustAsResourceUrl(fileURL);

Do not forget to inject the $sce service.

If this is all done you can now embed your pdf:

<embed ng-src="{{content}}" style="width:200px;height:200px;"></embed>

PDF Blob - Pop up window not showing content

You need to set the responseType to arraybuffer if you would like to create a blob from your response data:

$http.post('/fetchBlobURL',{myParams}, {responseType: 'arraybuffer'})
   .success(function (data) {
       var file = new Blob([data], {type: 'application/pdf'});
       var fileURL = URL.createObjectURL(file);
       window.open(fileURL);
});

more information: Sending_and_Receiving_Binary_Data

How to open Blob URL on Chrome iOS

FileReader solved my problem.

var reader = new FileReader();
var out = new Blob([this.response], {type: 'application/pdf'});
reader.onload = function(e){
  window.location.href = reader.result;
}
reader.readAsDataURL(out);

How to handle PDF file from Web API in AngularJS?

As you are most probably aware, ios devices will not let you download and store a file to memory/disk, as you would do on a desktop/laptop.

Downloaded items must be opened by an app

As you are already working on an website, the browser seems a natural candidate.

---

As I surmise you do not wish to embed the pdf file inside your website, an alternative would be to open the pdf in a new browser tab.

If such a solution is acceptable for you, please check this SO post:

window.open() in an iPad

The provided solution does work, but only when Safari is configured so as not to block popups.

---

I am afraid this may well be the only viable option for you. Having the iPad store the pdf into apps like iBooks will not work, according to this post. It cannot be automated with javaScript.

---

To my knowledge, there is no perfect solution in this case, just a most acceptable solution: open the pdf in a new tab in the browser, if ios has been detected.

If you are interested in this compromise, and run into issues implementing it with window.open(), I'll be happy to help.

Blob URL not working on Android Browsers

I was unable to get it to work as needed. As a work around, in the event the user is using an Android device I just download the document to local storage by opening a window to the file address. I hope this is something that is addressed in the future.

var attachmentPromise = $http.get("/api/" + $routeParams.ID, { responseType: 'blob' }).then(function (result) {                                    
        var file = new Blob([result.data], { type: 'application/pdf' });
        if (window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(file, "Layout.pdf");
        }
        else if (window.navigator.userAgent.match(/Chrome/i) && window.navigator.userAgent.match(/Mobile/i)) {
            window.open("/api/" + $routeParams.ID)
        }
        else if (window.navigator.userAgent.match('CriOS')) {
            var reader = new FileReader();
            reader.onloadend = function () { $window.open(reader.result); };
            reader.readAsDataURL(file);
        }
        else if (window.navigator.userAgent.match(/iPad/i) || window.navigator.userAgent.match(/iPhone/i)) {
            var url = $window.URL.createObjectURL(file);
            window.location.href = url;
        }
        else {
            var url = window.URL || window.webkitURL;
            window.open(url.createObjectURL(file));
        }
    }) 

---

Related Topics