11

How does one go about setting up file download in a Single Page Application, without triggering a reload?

I have had a situation where a PDF file is generated on the server and needs to be given to the client for download. Sending it as an application/octet-stream does nothing useful in a SPA, because files can't be sent over AJAX.

The best I came up with is saving the generated file in a temp folder on the server, sending file's URL to the client and doing window.open(url). The problem is that different browsers open files differently. Firefox for instance, by default, opens PDFs in the same tab, using their PDF.js, disrupting the whole SPA idea. But doing a window.open(url, '_blank') often triggers popup blockers etc. Other file types can cause God knows what...

Is there a cross-browser, safe, general method for downloading files in a SPA?

Community
  • 1
  • 1
Sljux
  • 534
  • 10
  • 28

1 Answers1

5

In SPA application I wrote a while back the the window.location.href = '...' did the trick and worked correctly for most browsers, but the contentType and content-disposition header of the page being downloaded is what makes the biggest difference. if the browser can recognize the file as a type do be downloaded then chances are the SPA won't break on redirect. Also just a quick note SPA frameworks like Angular sometimes allow for target='_new' and target='_self' on their a tags without interfering with the routes and such.

Warrenn enslin
  • 1,036
  • 8
  • 11
  • Still, it doesn't eliminate the need for generating temporary files on the server, but that shouldn't be a big deal. – Sljux Feb 05 '14 at 18:31
  • You might get inconsistent behaviour from browsers as a result of browser plugins, that one is harder to overcome. You might also get inconsistent behaviour from browsers in how they deal with the response headers. I would think that if the response data from the server is exactly the same as it would be when generating a temporary file the behavior should be the same client side, but that would not be anything within the scope of the SPA framework rather how you are processing the files server side. – Warrenn enslin Feb 06 '14 at 11:07
  • 4
    The problem is, if you do `window.location.href = 'GenerateFile'`, and there is an error server-side, there is no way to handle the error and not break the SPA. When you generate a temp file, you can return something like `{ success: true, filepath: '...' }` and `{ success: false, message: '...' }`, and it can be handled properly. – Sljux Feb 07 '14 at 12:21
  • 1
    I am not sure if this will help but there is a jquery library that deals with downloads [http://jqueryfiledownload.apphb.com/](http://jqueryfiledownload.apphb.com/) depending in you SPA framework it might be possible to integrate the libary without breaking your existing stuff, and can deal scenarios where there is a failur on the server. – Warrenn enslin Feb 10 '14 at 09:56
  • Thanks, this looks promising. – Sljux Feb 10 '14 at 12:16