3

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)?

Harper
  • 1,285
  • 3
  • 15
  • 35

1 Answers1

4

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 https://github.com/eligrey/FileSaver.js to initiate a file download.

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

Harper
  • 1,285
  • 3
  • 15
  • 35