Performing file downloads through AJAX in AngularJS

Question

Performing file downloads through AJAX in AngularJS

Recently, I developed an AngularJS program to facilitate file downloads from the server. Below is 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); 
});
}

My current approach involves triggering the exportCSVBulk function when a user clicks on the EXPORT AS CSV link, setting the URL value (fullListUrl) in the process. However, due to the nature of this being an Ajax request, there seems to be a delay in redirection upon clicking the link. Is there a solution to this issue, or perhaps an alternative method that can be implemented?

java javascript angularjs url spring-mvc

Answer 1

Answer №1

I have encountered a similar issue when trying to download files like .pdf, .xls, .xlsx etc through Ajax.

It is a known fact that files cannot be downloaded directly through Ajax, but I have found a solution that enables file downloads through Ajax.

You can utilize the jquery.fileDownload - A jQuery File Download Plugin for feature rich file downloads with an Ajax-like experience.

See Demo in Action

On the Server Side

For server-side processing, I am utilizing Spring framework.

@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); // obtaining 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);
}

On the Client Side

For client-side scripting, 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 - Get jquery.fileDownload.js Here

Answer 2

I have encountered a similar issue when trying to download files like .pdf, .xls, .xlsx etc through Ajax.

It is a known fact that files cannot be downloaded directly through Ajax, but I have found a solution that enables file downloads through Ajax.

You can utilize the jquery.fileDownload - A jQuery File Download Plugin for feature rich file downloads with an Ajax-like experience.

See Demo in Action

On the Server Side

For server-side processing, I am utilizing Spring framework.

@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); // obtaining 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);
}

On the Client Side

For client-side scripting, 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 - Get jquery.fileDownload.js Here

Answer 3

Answer №2

I came up with a more geometric approach to solving the issue. In order to synchronize with server information, the server must provide content-type and content-disposition. However, it is also possible to manually add type and download properties.

 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)
            })
        }

Answer 4

I came up with a more geometric approach to solving the issue. In order to synchronize with server information, the server must provide content-type and content-disposition. However, it is also possible to manually add type and download properties.

 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)
            })
        }

Performing file downloads through AJAX in AngularJS

Answer №1

On the Server Side

On the Client Side

Answer №2

Similar questions

Enhance your user interface with Twitter Bootstrap and Angular.js by implementing a dynamic drop-down feature

Discover the latest method for retrieving the value of a hidden field using Selenium WebDriver in Java

The Bootstrap navbar is not aligning correctly and the collapse feature is not functioning properly

Sharing environment variables between a React app and an Express.js server that hosts it as a static site can be achieved by setting

Formik Fields with unique key properties

Updating Angular 5 Views Dynamically Using a While Loop

Dealing with a jQuery/Javascript/AJAX response: sending a string instead of an integer as a parameter to a

Sending a JavaScript array to a Ruby on Rails controller by utilizing a hidden form field

issue concerning slide functionality and ajax integration

Having trouble establishing a connection between MongoDB Atlas, NodeJS, and Mongodb

Navigating through the execution of a program with the use of

Troubleshooting Android Volley Response Problems

How do I reverse the black background and white foreground of the image signature stream/object in iText Reading?

Amcharts displays individual balloons for each graph instead of a single balloon for all graphs

Upon my initial click of the delete button, all the notes vanished. However, after refreshing the page, everything was back to normal and functioning properly

Is it possible to trigger a submit button to perform a POST request and an AJAX call simultaneously

Trigger Element Upon Click

UniformJS Select Control in AngularJS fails to refresh

"Track the progress of a form submission with a loading indicator using Sweet

Managing control among various child popups