How to generate and prompt to save a file from content in the client browser? [duplicate]

Question

I have a situation where I need to give my users the option to save some data stored locally in their client memory to disk. The current workaround I have is having a handler like this

(define-handler (download-deck) ((deck :json))   (setf (header-out :content-type) "application/json"     (header-out :content-disposition) "attachment")   deck) 

which does exactly what it looks like. The client sends their data up, and saves the returned file locally.

This seems stupid.

Please, please tell me there's a better, simpler, cross-browser way to let a client save some local data to their disk with a file-save dialog box.

Every answer I read on the subject either says "no, you can't save files with javascript" or "yes, there's this one semi-documented piece of the Chrome API that might let you do it in three pages".

Answer 1

This "FileSaver" library may help. If you want it to be reasonably cross-browser, you'll also need this to implement the W3C Blob API in places it's not already implemented. Both respect namespaces, and are completely framework agnostic, so don't worry about naming issues.

Once you've got those included, and as long as you're only saving text files, you should be able to

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"}); saveAs(blob, "hello world.txt"); 

Note that the first argument to new Blob has to be a list of strings, and that you're expected to specify the filename. As in, the user will see this file being downloaded locally, but won't be able to name it themselves. Hopefully they're using a browser that handles local filename collisions...

Answer 2

This is my code:

<a id='tfa_src_data'>Export</a>  document.getElementById('tfa_src_data').onclick = function() {                                           var csv = JSON.stringify(localStorage['savedCoords']);                         var csvData = 'data:application/csv;charset=utf-8,'                                         + encodeURIComponent(csv);                         this.href = csvData;                         this.target = '_blank';                         this.download = 'filename.txt';                     }; 

You can use various data types.