How to download file from backend to UI

It is possible from UI with very lesser code. Please note it may change depends on how the backend code has written. Let us check some cases.

Suppose service is returning exact files, then UI just need to invoke the service API and it will download. Let us see this scenario first with a simple example.

I have used angular for explaining but you can try normal JavaScript as well.

var url = 'your service call';

$http.get( url, {cache: false} )
.success( function( data )
{
 if(success){
  window.location.href = 'your service call';
  //window.open( 'your service call');
 }
})
.error( function( data)
{
 error(data);
});

This will do the job and you may noticed I commented "window.open", yes you can use that as well for opening the download files and more over you can directly invoke the service call also if backend allows that.

var url = 'your service call'
window.location.href = url;

Here "your service call" is nothing but the backend api or method (java/.net or whatever)

If UI need to pass some tokens or any kind of security header while invoking service calls, then above method won't work. We won't be able to invoke the api directly without passing the header. Let us check how we can do in this case.

If you are interested refer this also How to set headers for $http calls in Angular

Many of you already heard about FileSaver JS, using this plugin we can easily download files from backend .You can download FileSaver JS from here https://github.com/eligrey/FileSaver.js/

var url = 'your service call';
var filename = 'myfile'
$http.get( url, {cache: false} )
.success( function( data )
{
 var blob = new Blob([data], {
  type: "application/octet-stream"
 });
 saveAs(blob, filename );
})
.error( function( data)
{
 //error
});
 

You can give any name and also you can specify the extension.

var filename = 'myfile.txt'
var filename = 'myfile.csv' 
etc..

And one important thing is the type which should be the same which you mentioned in the service files.

type: "application/octet-stream"
type: 'application/vnd.ms-excel'
etc

OK then I don't want to use any plugin for download. Let us see how we can achieve this.

var url = 'your service call';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('ticket', 'ticket_1223333');
xhr.responseType = "blob";
xhr.onreadystatechange = function() {
 if (xhr.readyState == 4) {
  var data = xhr.response;
  var blob = new Blob([data], 
  { type: 'application/vnd.ms-excel' });
  var url = URL.createObjectURL(blob);
  window.location = url;
 }
};
xhr.send(null);
    

Here I have used relatively old code but you can always try with the same using JQuery as well

There must be many options to achieve this I just mentioned some of them.

Related Posts

1. File upload and sending data to backend using angular js.

2. Angular js client side pagination like google.

3. Angular Loader using font awesome icons

4. Angular js add class to active element