AngularJS CSV File Download from API


I have an admin control panel where admin users can set a few options and then click a button to run a report. The report should return a CSV file download prompt to the user.

I am using ui-router and $resource services. The response headers/mime type are set correctly, but the CSV file is returned as text (no file download initiated) by the $resource handler.

I tried creating the download link directly, by forming a querystring from the $scope, but unfortunately my API's authentication scheme uses a custom HTTP header token and it's not possible to send that to the API (which is also on another subdomain) via an anchor tag, such as this one:

<a href="">Run</a>

Is there a way to initiate a file download prompt using an XHR request (with custom header)?

Problem courtesy of: Harper


I'm using a custom header token so downloading the report via a simple link is impossible; the request has to be made via XHR. My two-part solution:

  1. Returned the CSV data from the API directly as text, removing file attachment headers. This is the correct solution, anyway, because it keeps the REST JSON API unconcerned with file downloads, which are a browser concept.

  2. Wrapped the API response data in a Blob, and then used to initiate a file download.

A drawback is this requires IE10+, but that is okay in my case.

Solution courtesy of: Harper


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.