30

I have a link that I would like to add to my javascript (Marionette/Backbone) single page application that will download an Excel file to the user's local drive via the browser's file save. A typical HTTP request would be:

GET /api/v1/objects/?format=xls HTTP/1.1
Authorization: ApiKey username:apikey
Host: api.example.com
Connection: close
User-Agent: Paw 2.0.5 (Macintosh; Mac OS X 10.9.2; en_US)
Content-Length: 0

Which results in the following typical response:

HTTP/1.1 200 OK
Server: gunicorn/18.0
Date: Tue, 06 May 2014 03:09:02 GMT
Connection: close
Transfer-Encoding: chunked
Vary: Accept
Content-Type: application/vnd.ms-excel
Content-Disposition: attachment; filename="filename.xls"
Cache-Control: no-cache

<<CONTENT HERE>>>

I'd like to do this with a simple anchor element styled as a button as this would invoke the browser's file storage machinery. Something similar to:

<a href="/api/v1/objects/?format=xls" class="btn btn-primary pull-right">Download to Excel file</a>

I'm not clear on how I get the authorization header to be passed when doing this via an anchor link -- or perhaps I'm just not thinking and there is a better way.

My backend is a Django web app using Tastypie.

Erik
  • 6,796
  • 7
  • 54
  • 97

2 Answers2

27

This not possible, because the only way to add HTTP headers is using the XHR, but XHR cannot be used to download files.

You could however use cookies to do that.

  1. Just set the cookie, with a returned value from the server.
  2. Wait till the user clicks the link.
  3. Invalidate the cookie after the user clicked the link.
Community
  • 1
  • 1
Artjom B.
  • 58,311
  • 24
  • 111
  • 196
  • I suspected this was the case. Just wanted to be sure. I guess I will fall back on some sort of session cookie arrangement similar to what you are suggesting. Thanks! – Erik May 07 '14 at 01:33
  • What is the use of setting cookie to download file on link click. – Ashok Gurram Oct 01 '18 at 06:58
  • @AshokGurram No idea what I was thinking or what I meant. It could be that I suggested to refactor the server code to use cookies instead of a usename and API key combination which is invalidated so that future requests would not have that cookie, but I'm not sure. Maybe there was something lost in translation. Anyway, there is a better solution as Robert mentioned. – Artjom B. Oct 01 '18 at 18:00
  • Thanks for your Response. I have 5 cookies in the browser but on hitting api, only 3 cookies are being sent to back end, 2 of remaining cookies are getting lost. Any Idea? I have checked in header, It is sending 5 cookies but on checking in backend java only 3 cookies are exist. – Ashok Gurram Oct 05 '18 at 09:36
  • @AshokGurram If you've checked the developer tools in your browser that the cookies are sent in the request that you expect, then this is really a server issue. The Java server ecosystem is quite extensive and you'd have to be more specific, but even then I'm not sure I can answer. Make sure that you're checking the cookies from the correct request on the server side. – Artjom B. Oct 06 '18 at 07:57
  • I would generate a temporal download JWT token (5 minutes life span) from a new api operation and then add an url parameter to provide it in the download resource. – j0nd0n7 Nov 26 '19 at 18:00
  • **XHR or Fetch** – Wenfang Du Aug 13 '20 at 02:39
0

instead of passing token in headers pass it as url parameter

<a href="/api/download/answers/{{token}}/{{survey._id}}" download="answers.csv" >
</a>
Vladimir Titov
  • 1