How can I download a file from the web using AngularJS?

Question

I used AngularJS to get a from the web and store it in the database(I converted it in a byte array). Now I want to make it possible to download that file using AngularJS.How can I do this?(Do I have to convert the byte array in somethin else?)The file extension can be pdf, doc/docx, jpg.

Answer 1

Do this in your success or then block of service.

var a = document.createElement('a');
a.href = 'data:here goes the mime type of file,' + encodeURI(response);
a.target = '_blank';
a.download = 'file name . extension ';
document.body.appendChild(a);
a.click();

Ex: I am downloading a csv file from base64 string

var a = document.createElement('a');
a.href = 'data:attachment/csv,' + encodeURI(response);
a.target = '_blank';
a.download = 'Export.csv';
document.body.appendChild(a);
a.click();

here I am string base64 in response

Answer 2

Here is my Angular Controller

angular .module('viewCvForm') .component('viewCvForm', {

    templateUrl: 'view-cv-form/view-cv-form.template.html',
    controller: ['$scope','$routeParams','Applicant',
        function ApplicantController($scope,$routeParams,Applicant) {
            console.log('Cv Controller');
            console.log($routeParams.id);

            var self=this;

            fetchCV();
            function fetchCV() {
                var applicant={
                        firstName: "",
                        lastName: "",
                        email: "",
                        phoneNumber: "",
                        jobId:0,
                        id:$routeParams.id

                }

                return Applicant.fetchCV(JSON.stringify(applicant))
                    .then(function (response) {
                        console.log(response);

                            var a = document.createElement('a');
                            a.href = 'data:application/txt,' + encodeURI(response.data);
                            a.target = '_blank';
                            a.download = 'cv.txt';
                            document.body.appendChild(a);
                            a.click();
                            d.resolve(response);
                    },
                        function (errResponse) {
                            console.error('Error while creating Interview');
                        }
                    );
            }

        }
    ]
});

response is an Object, which has a field called "data" which is of type byte[](in Java Controller).I use this field to save the file into the database. How can I convert response.data to show what is inside that file, because now it shows just base64 characters.

Answer 3

Here is a sample code for downloading any file (eg: PDF) in different types of browser's

$http.get("/displayPdf", {responseType: 'arraybuffer', params: {id: 1}}).success(function(data) {
    var blob = new Blob([data], {type 'application/pdf'});
    var anchor = document.createElement("a");
    if(navigator.userAgent.indexOf("Chrome") != -1||navigator.userAgent.indexOf("Opera") != -1){
                    $window.open(URL.createObjectURL(file,{oneTimeOnly:true}));
    }else if(navigator.userAgent.indexOf("iPad") != -1){
                    var fileURL = URL.createObjectURL(file);
                    //var anchor = document.createElement("a");
                    anchor.download="myPDF.pdf";
                    anchor.href = fileURL;
                    anchor.click();
    }else if(navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Safari") != -1){
                        var url = window.URL.createObjectURL(file);
                        anchor.href = url;
                        anchor.download = "myPDF.pdf";
                        document.body.appendChild(anchor);
                        anchor.click();
                        setTimeout(function(){
                            document.body.removeChild(anchor);
                            window.URL.revokeObjectURL(url);  
                        }, 1000);
      }
   });