0

On click of download button beside name of a file I am getting the file content from backend . This content is in the bytes . The file can be of any type . How to convert the data received from backend to file and download it automatically on receiving response(file Content) .New bee in html and angular js .Any pointers or suggestions needed :)

poornima
  • 53
  • 5
  • post some code snippet. – roxid Apr 02 '15 at 12:42
  • Do you have an example of the file type? What are you planning on doing after you create the file? Do you have any code snippets you can post? – Jonathan Smith Apr 02 '15 at 12:43
  • Does the front-end do anything with the data? Or it should simply be downloaded to the client machine? Because in the latter case, I assume you are much better off by downloading the file directly to the client, without it being processed by angular. And therefore this is not a javascript, nor an angular question, but rather a back-end question (whatever you use in your backend) – Marco Sandrini Apr 02 '15 at 12:45
  • Similar to http://stackoverflow.com/a/17178685/697020. The gist is you can't use angular to download the file. I just ran into this issue recently and solved it by using a plain old HTML form to POST to the server, and added the response header of 'Content-Disposition: attachment'. – kshreve Apr 02 '15 at 12:50

1 Answers1

1

You will need to have your backend tell your front-end the location of the file, and then the front end can place a link to the file. The backend should probably generate a unique hash name for this file.

The actual file can be returned as part of a Rest GET request as long as the backend webserver has the correct mime types configured.

So in your controller you would call a service to get the file path:

SomeController.$inject = ['$http'];
var SomeController = function($http) {

    var self = this;
    $http.get('/download-file-path').then(function(path) {
        self.path = path; 
    }

}

Then in your view

<div ng-controller='SomeController as vm'>
    <a ng-href="{{vm.path}}">Download</a>
</div>

When angular calls GET: /download-file-path the backend should return the name and path of the file, say something like /download/file-7dje79ae.xml. Then angular puts this path in the a link. When the user clicks the download button, the users browser will then make a request to /download/file-7dje79ae.xml and download the file.

Martin
  • 15,820
  • 4
  • 47
  • 56