Blob URL not working on Android Browsers

Question

I've created a simple web app using .NET (With Entity Framework) and AngularJS to retrieve PDF files. I'm able to have the app work perfectly on Desktop browsers and iOS browsers. Unfortunately I'm having issues with getting this to work on any Android browser.

Inside my controller is a function triggered by ng-click on a simple button that requests and displays the pdf. I was able to use the solution here to get the PDF's working correctly on iOS and Edge browsers.

appModule.controller("cellController", ['$scope','$http','$routeParams','$window','$sce', function ($scope, $http, $routeParams,$window,$sce) {
....
$scope.getLayout = function () {
    var attachmentPromise = $http.get("/api/pdf" + $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('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));
        }
    });
};
}]);

As mentioned above the above code works well on desktop and iOS, but will either open a blank blob page on Android or fail to download the file on Android.

Any suggestions on this would be greatly appreciated :).

Let me know if I can provide any additional information

score 0 · Accepted Answer · answered Nov 10 '17 at 17:01

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));
        }
    })

Blob URL not working on Android Browsers

1 Answers1