AngularJS CSV File Download from API
angular-resource, angular-ui-router, angularjs, download, ngresource
Solution
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:
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.
Wrapped the API response data in a `Blob`, and then used https://github.com/eligrey/FileSaver.js to initiate a file download.
A drawback is this requires IE10+, but that is okay in my case.
Problem
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="http://example.com/admin/report/csv?usertype=1&days=5">Run</a> ``` Is there a way to initiate a file download prompt using an XHR request (with custom header)?