I have developed a straightforward web application using .NET (including Entity Framework) and AngularJS for fetching PDF files. Everything works smoothly on desktop browsers and iOS browsers, but I am encountering difficulties in getting it to function properly on Android browsers.
Within my controller, there is a function that is activated by ng-click on a simple button to request and display the PDF. I was able to resolve the issues related to displaying PDFs correctly on iOS and Edge browsers by referring to a solution found here.
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));
}
});
};
}]);
The code mentioned above performs well on desktop and iOS platforms, but it either displays a blank blob page on Android or fails to download the file on Android.
Any suggestions regarding this issue would be extremely helpful :).
Please feel free to ask if you require any additional information