java - AngularJS - File Download through AJAX -

java - AngularJS - File Download through AJAX -

i created angular js programme downloading file server here follows code

html code

<a download="fulllist.csv" ng-href="{{ fulllisturl }}" type="button" class="btn btn-success btn-xs exec-batch" ng-click="exportcsvbulk(batchexec)"> <span class="glyphicon glyphicon-ok"></span> export csv </a>

angularjs controller

$scope.exportcsvbulk=function(){ var page = "../importexportservice/exportbulkcsv/"+batchexec.id; $http.get(page).success(function(response) { $scope.fulllisturl = 'data:text/csv;charset=utf-8,' + escape(response); }); }

here doing when user click on export csv link function exportcsvbulk fires , function url value (fulllisturl) sets. ajax request, when user click on link url, response time become little bit long results url not redirected properly. possible prepare problem? or there alternative way prepare this?

i have faced similar issue downloading files such .pdf, .xls, .xlsx etc through ajax.

its fact cant download files through ajax, though came solution downloads files through ajax like.

you can utilize jquery.filedownload - jquery file download plugin ajax like, feature rich file downloads.

demo working

server side

i using spring @ server side

@requestmapping(value = "exportxls", method = requestmethod.post, produces = app_json) @responsebody public void getcsv(final httpservletresponse response, @requestparam(value = "empid", required = true) final string empid) throws ioexception, exception { final byte[] csv = exportxlsutil.getfilebytes(empid); // file bytes final outputstream output = getoutputstream(response); response.setheader("content-disposition", "attachment; filename=documents_" + new datetime() + ".xls"); response.setcontenttype(content_type); response.setcontentlength(csv.length); write(output, csv); } client side

at client side, using angularjs

$downloadxls = function(id) { $.filedownload('/user/exportxls', { httpmethod : "post", info : { empid : id } }).done(function(e, response) { // success }).fail(function(e, response) { // failure }); }

download link - jquery.filedownload.js

java javascript angularjs url spring-mvc