Anish Antony Anish Antony - 2 years ago 324
Java Question

AngularJS - File Download through AJAX

I created an angular js program for downloading a file from the server here follows the 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 AS CSV

AngularJS Controller

var page = "../importExportService/exportBulkCSV/";
$http.get(page).success(function(response) {
$scope.fullListUrl = 'data:text/csv;charset=utf-8,' + escape(response);

Here what i am doing is when a user click on the
link the function
fires and from that function the url value (fullListUrl) sets. But this is an ajax request, so when a user click on the link the url, the response time become little bit long which results the url will not redirected properly. Is it possible to fix this problem? or is there is any alternative way to fix this?

Answer Source

I have faced the similar issue for downloading files such as .pdf, .xls, .xlsx etc through Ajax.

Its a fact that we cant download files through Ajax, even though i came up with a solution which downloads files through Ajax like.

You can use jquery.fileDownload - A jQuery File Download Plugin for Ajax like, feature rich file downloads.

Demo Working

Server Side

I am using Spring at the server side

@RequestMapping(value = "exportXLS", method = RequestMethod.POST, produces = APP_JSON)
public void getCSV(final HttpServletResponse response, @RequestParam(value = "empId", required = true) final String empId) throws IOException, Exception
    final byte[] csv = ExportXLSUtil.getFileBytes(empId); // get the file bytes
    final OutputStream output = getOutputStream(response);
    response.setHeader("Content-Disposition", "attachment; filename=documents_" + new DateTime() + ".xls");
    write(output, csv);

Client Side

At the client side, I am using AngularJS

$downloadXLS = function(id)
        httpMethod : "POST",
        data : {
            empId : id
    }).done(function(e, response)
     // success
    }).fail(function(e, response)
     // failure

Download Link - jquery.fileDownload.js

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download