File download/save from a Jersey rest api call using ANGULARJS . file is attached with response as "Content-Disposition"

Question

I am new to angular .. I hava java rest api which return CSV file in response as attachment as | "Content-Disposition", "attachment; filename=" | content-type :application/octet-stream

Now when i am calling this api from AngularJS using $http i am getting response.data ="" (blank)

I am using basic authorisation for security so I have to pass Header while calling calling API so can't use link click or new window open fro CSV download.

to test when i removed authorisation and hit the url in browser then CSV file is being downloaded.so no issue at server side .

I need help at angularjs side to download CSV file from web api response as attachment.

Here is my Java API Code

public class ServiceAPI {

@GET
@Produces(MediaType.APPLICATION_OCTET_STREAM)
public Response getFileAsCSVFile(){

byte[] file=null;
    try {
        ArrayList<> List=new ArrayList<>();// data retrieved from DB 

        if(null != List){
             file=convertJsonToCSV(new Gson().toJson(List));

        }

    } catch (ParseException e) {


        e.printStackTrace();
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }


    return            Response.ok(getBytes(file),MediaType.APPLICATION_OCTET_STREAM).header("Content-Disposition", "attachment; filename=" + "FileName.csv").build();
 }
 }

and Angular code :

app.controller('review', ['$scope', '$http',  function ($scope, $http){



$scope.fromDate = new Date();
$scope.toDate = new Date();


$scope.minDate = new Date(
    $scope.fromDate.getFullYear(),
    $scope.fromDate.getMonth() - 2,
    $scope.fromDate.getDate(),

    $scope.toDate.getFullYear(),
    $scope.toDate.getMonth() - 2,
    $scope.toDate.getDate()
);

$scope.maxDate = new Date(
    $scope.fromDate.getFullYear(),
    $scope.fromDate.getMonth() - 2,
    $scope.fromDate.getDate(),

    $scope.toDate.getFullYear(),
    $scope.toDate.getMonth() - 2,
    $scope.toDate.getDate()
);

$scope.reviews = json;


function openSaveAsDialog(filename, content, mediaType) {
    var blob = new Blob([content], {type: mediaType});
    saveAs(blob, filename);
}

function callApi(url) {

   // var dat=apiFactory.getServiceData(url);
   // console.log(dat);
   // apiFactory.getServiceData(url);

    var responseType='arraybuffer';
    var expectedMediaType='application/octet-stream';
    $http.get(url, {

        headers: {

            accept: expectedMediaType
        },
        responseType:responseType,
        cache: true,
        transformResponse: function (data) {
            var pdf;
            if (data) {
                pdf = new Blob([data], {
                    type: expectedMediaType
                });
            }
            return {
                response: pdf
            };
        }
    }).then(function (data,status,headers) {
        var filename='Preview.csv',
            octetStreamMime = "application/octet-stream",
            contentType;

        headers = data.headers();
        contentType = headers["content-type"] || octetStreamMime;


     //   openSaveAsDialog(filename, response.data, expectedMediaType);
        if (navigator.msSaveBlob) {
            var blob = new Blob([data], { type: contentType });
            navigator.msSaveBlob(blob, filename);
        } else {
            var urlCreator = window.URL || window.webkitURL || window.mozURL || window.msURL;

            if (urlCreator) {
                // Try to use a download link
                var link = document.createElement("a");

                if ("download" in link) {
                    // Prepare a blob URL
                    var blob = new Blob([data.data], { type: contentType });
                    var url = urlCreator.createObjectURL(blob);

                    link.setAttribute("href", url);
                    link.setAttribute("download", filename);

                    // Simulate clicking the download link
                    var event = document.createEvent('MouseEvents');
                    event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
                    link.dispatchEvent(event);
                } else {
                    // Prepare a blob URL
                    // Use application/octet-stream when using window.location to force download
                    var blob = new Blob([data], { type: octetStreamMime });
                    var url = urlCreator.createObjectURL(blob);
                    $window.location = url;
                }
            }
        }
    });

};
    $scope.submit = function (fromDate, toDate) {


       $scope.url = API_url;


        var resp =callApi(($scope.url).split(" ").join("%20"));

        console.log(resp);
    };
},
]);

Answer 1

I have an example with spring MVC instead of JAX-RS (Jersey)

HTML:

<button ng-click="downloadPdf()" class="btn btn-primary">download PDF</button>

Angularjs controler:

$scope.downloadCsv = function () {
    console.log("downloadCsv");
    var fileName = "test.csv";
    var a = document.createElement("a");
    document.body.appendChild(a);
    XxxxxxServiceCSV.downloadCsv().then(function (result) {
        console.log("downloadCsv callback");
        var file = new Blob([result.data], {type: 'application/csv'});
        var fileURL = URL.createObjectURL(file);
        a.href = fileURL;
        a.download = fileName;
        a.click();
    });
};

Angularjs services:

angular.module('xxxxxxxxApp')
    .factory('XxxxxxServiceCSV', function ($http) {
        return {
            downloadCsv: function () {
            return $http.get('api/downloadCSV', { responseType: 'arraybuffer' }).then(function (response) {
                return response;
            });
        }
    };
});

Java code JAX-RS(spring MVC):

@RequestMapping(value = "/downloadCSV", method = RequestMethod.GET, produces = "application/csv")
public void demo(HttpServletResponse response) throws IOException {
    List<String> names = new ArrayList<String>();
    names.add("First Name");
    names.add("Second Name");
    names.add("Third Name");
    names.add("Fourth Name");
    BufferedWriter writer = new BufferedWriter(response.getWriter());
    try {
        response.setHeader("Content-Disposition", "attachment; filename=\"test.csv\"");
        for (String name : names) {
            writer.write(name);
            writer.write(",");
        }
        writer.newLine();
    } catch (IOException ex) {
    } finally {
        writer.flush();
        writer.close();
    }
}