how to download file using AngularJS and calling MVC API?

Question

I am using AngularJS, and I have a MVC 4 API that returns a HttpResponseMessage with an attachment.

var result = new MemoryStream(pdfStream, 0, pdfStream.Length) {      Position = 0 }; var response = new HttpResponseMessage {      StatusCode = HttpStatusCode.OK,      Content = new StreamContent(result) }; response.Content.Headers.ContentDisposition =             new ContentDispositionHeaderValue("attachment") {                     FileName = "MyPdf.pdf"            }; response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream"); return response; 

I am using a jQuery plugin called fileDownload... which download the file beautifully... but I havent found the way to do this in the "Angular" way... any help will be appreciated.

// _e

Answer 1

I had the same problem. Solved it by using a javascript library called FileSaver

Just call

saveAs(file, 'filename'); 

Full http post request:

$http.post('apiUrl', myObject, { responseType: 'arraybuffer' })   .success(function(data) {             var file = new Blob([data], { type: 'application/pdf' });             saveAs(file, 'filename.pdf');         }); 

Answer 2

Here you have the angularjs http request to the API that any client will have to do. Just adapt the WS url and params (if you have) to your case. It's a mixture between Naoe's answer and this one:

$http({     url: '/path/to/your/API',     method: 'POST',     params: {},     headers: {         'Content-type': 'application/pdf',     },     responseType: 'arraybuffer' }).success(function (data, status, headers, config) {     // TODO when WS success     var file = new Blob([data], {         type: 'application/csv'     });     //trick to download store a file having its URL     var fileURL = URL.createObjectURL(file);     var a = document.createElement('a');     a.href = fileURL;     a.target = '_blank';     a.download = 'yourfilename.pdf';     document.body.appendChild(a); //create the link "a"     a.click(); //click the link "a"     document.body.removeChild(a); //remove the link "a" }).error(function (data, status, headers, config) {     //TODO when WS error }); 

Explanation of the code:

1. Angularjs request a file.pdf at the URL: /path/to/your/API.
2. Success is received on the response
3. We execute a trick with JavaScript on the front-end:
   • Create an html link ta: <a>.
   • Click the hyperlink <a> tag, using the JS click() function
4. Remove the html <a> tag, after its click.