Download a file from http response body

Question

I've been researching this for quite a while now, and can't find a clear answer / a way to solve my problem.

The situation is this: I'm sending a post request to a server. The response contains the binary of a pcap file in it's body. How do I download it as a file.

My simplified code:

...
this.downloadPcap = function(timestamp){
  var start = timestamp-10;
  var end = timestamp+10;
  var requestData = {"start": start, "end": end};
  $http.post(serverUrl, requestData);
}

This is triggered by a click, where I get the timestamp of some event, and the server creates a PCAP file from 10 seconds before and after the exact event.

I receive a response with a long binary. Also:

Content-Length: 134772

Content-Type: application/pcap

Now I was told that if the header will be like so, the browser will automatically start downloading the response as a file. It doesn't.

So I've read very little about Blob, and FileSaver, but I feel like there must be an easier way to download files that are being created dynamically.

Can someone please point me in some direction? Is there no simpler way than including more libraries?

Thanks in advance

Try this answer http://stackoverflow.com/questions/3665115/create-a-file-in-memory-for-user-to-download-not-through-server#answer-18197341 — jcubic, Dec 31 '15 at 12:39
Have you tried adding Content-Disposition header? `Content-Disposition: attachment; filename="testfile.someext"` — marekful, Dec 31 '15 at 12:40
I would have suggested a form with an iframe but since angular post json instead of form data, you'll have to use the not so easy ajax -> blob url method. — Musa, Dec 31 '15 at 12:40
Thanks jcubic, I will keep that in mind in case I don't find an easier way. Marekful - Your saying i need to add those headers to the response from the server, and than the server will start downloading the file? Musa - thank you too, I've read about receiving the data and using blob to save it. Might have to do that — Finkel, Dec 31 '15 at 12:48
ajax isn't intended for downloads, @marekful suggestion does not work. — charlietfl, Dec 31 '15 at 13:04
@charlietfl do you have another suggestion? a way to make the browser download the data from the response? — Finkel, Dec 31 '15 at 13:06
as I have stated in the question, I have been researching for a while, and haven't found a clear answer. — Finkel, Dec 31 '15 at 13:13
Here is a post with some interesting answer to a very similar question: http://stackoverflow.com/questions/20904151/download-text-csv-content-as-files-from-server-in-angular — beaver, Jan 01 '16 at 17:16
@beaver Sorry I haven't responded in a couple of days, I haven't got around to testing this yet. I hope to test it in the next couple of days, looks promising though! — Finkel, Jan 04 '16 at 06:56

score 4 · Accepted Answer · edited May 23 '17 at 10:27

beaver pointed me to the answer here: https://stackoverflow.com/a/20904398/5459561

Works perfectly! I'm personally downloading a PCAP, and the encoding is different, but all the rest works!

$http service returns a promise which has two callback methods as shown below.

$http({method: 'GET', url: '/someUrl'}).
  success(function(data, status, headers, config) {
     var anchor = angular.element('<a/>');
     anchor.attr({
         href: 'data:attachment/csv;charset=utf-8,' + encodeURI(data),
         target: '_blank',
         download: 'filename.csv'
     })[0].click();

  }).
  error(function(data, status, headers, config) {
    // if there's an error you should see it here
  });

Download a file from http response body

1 Answers1