AngularJS - File Download through AJAX

Question

I created an angular js program for downloading a file from the server here follows the 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 AS 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 what i am doing is when a user click on the EXPORT AS CSV link the function exportCSVBulk 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?

The simplest approach is to not make the request with AJAX. Just remove your `ng-click` attribute and rely on the browser to handle the download. — Ben Foster, Oct 28 '14 at 10:54
are you using java for the server side(anything like Spring controller or Jersey Rest Service etc...) — Nidhish Krishnan, Oct 28 '14 at 11:08
@BenFoster I done a small change here, Here i need the parameter(batchExec) for getting the content from the url. Also this a href in putted in a table row so the parameter will decide on the onclick — Anish Antony, Oct 28 '14 at 11:15
@NidhishKrishnan Give me some time to do my code with below example, If it successful i will give things :) — Anish Antony, Oct 28 '14 at 14:57

score 4 · Accepted Answer · answered Oct 28 '14 at 11:42

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)
@ResponseBody
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");
    response.setContentType(CONTENT_TYPE);
    response.setContentLength(csv.length);
    write(output, csv);
}

Client Side

At the client side, I am using AngularJS

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

Download Link - jquery.fileDownload.js

Jhonattan · Answer 2 · 2019-04-24T05:06:10.660

I created a more angular way solution. The server has to provide content-type and content-disposition if you want to sync with server info, although you could add type and download properties manually.

 vm.export = function () {
            //PopUps.showLoading()
            $http.get(Url).then(function (result) {
                //PopUps.hideLoading()
                var headers = result.headers()
                var blob = new Blob([result.data], { type: headers['content-type'] })
                var windowUrl = (window.URL || window.webkitURL)
                var downloadUrl = windowUrl.createObjectURL(blob)
                var anchor = document.createElement("a")
                anchor.href = downloadUrl
                var fileNamePattern = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/
                anchor.download = fileNamePattern.exec(headers['content-disposition'])[1]
                document.body.appendChild(anchor)
                anchor.click()
                windowUrl.revokeObjectURL(blob)
            })
        }

AngularJS - File Download through AJAX

2 Answers2

Server Side

Client Side

Linked