Download a file from server and giving filename in angularjs

Question

I am trying to download a zip file from my server (spring mvc controller). here is my code in angularjs (1.5) controller to download zip file.

   $http({
            url: '/myurl',
            method: 'GET',
            headers: {
                'Content-type': 'application/zip'
            },
            responseType: 'arraybuffer'
        }).success(function (data,status,headers) {
            var blob = new Blob([data], {type: "application/zip"});
            var objectUrl = URL.createObjectURL(blob);                
            var file = headers('Content-Disposition');               

            window.open(objectUrl);

        });

Above code works, but I need to give file name which I am getting in the response header. I got the file name from header('Content-Disposition') how to use this file name to downloaded file ? currently it is giving any random file name.

I tried below code it works in chrome but its not working in mozilla... is there any other solution which works in all browsers ?

            //var anchor = document.createElement("a");
            //anchor.download = "ATMOSLogFiles.zip";
            //anchor.href = objectUrl;
            //anchor.click();

Thanks for help !

Answer 1

An blob based solution:

You could use angular-file-saver to achieve this.

var app = angular.module('myApp', ['ngFileSaver'])

app.controller('ExampleCtrl', ['FileSaver', 'Blob', function () {
    $scope.download = function () {
        var myData = new Blob([text], { type: 'text/plain;charset=utf-8' });
        FileSaver.saveAs(myData, 'text.txt');
    }
}]);

---

An other solution based on HTML5:

A simple way by using the HTML5 download attribute / MDN documentation . No need for blobs. This attribute is supported by any browser & browser version which supports AngularJS (excluding IE10/IE11 - IE Edge does support it).

<a href="<downloadLink>" download="fileName">Download</a>

Answer 2

The above answer by @lin is correct but I want to add that as the question demands, one can directly pass the file name set at the server to be the file name of the file at the client side as follows:

Just install the angular-file-saver , reference it in your app and inject it as a dependency.

    var app = angular.module('myApp', ['ngFileSaver']);
    app.controller('mainCtrl', ['FileSaver', 'Blob', '$http', '$scope', function(FileSaver, Blob, $http, $scope) {
              // make ajax call to server
      $scope.download = function() {
           var req = {
               url: 'your server url',
               method: 'GET',
               responseType: 'arraybuffer'
           };
         $http(req).then(function(resp){
                var serverData = new Blob([resp.data], {type: resp.headers()['content-type']});
                FileSaver.saveAs(serverData, resp.headers()['content-disposition']); // File name set at server passed to the FileSaver function
         });
      }
}]);