Save/download data generated in JavaScript

Because I was bored I wrote a HTML5 player for Magnatune: Magnatune Player Greattune Player [repo]. Besides learning jQuery, HTML5 audio and HTML Drag and Drop I also developed a method to save playlists to files.

Everything except the search is implemented in JavaScript, so the server never knows the playlist. Because I didn't want to send the playlist to the server just so the user can download it I investigated what methods there are to save data generated in JavaScript. I came up with the solution presented here. It does not use Flash or a echo server and is therefore supported in every recent browser except Internet Explorer before the version 10.

Feature test: Does this browser support the download attribute on anchor tags? (currently only Chrome)

Use any available BlobBuilder/URL implementation:

IE 10 has a handy navigator.msSaveBlob method. Maybe other browsers will emulate that interface? See MSDN about it.

Anyway, HMTL5 defines a very similar but more powerful window.saveAs function:

However, this is not supported by any browser yet. But there is a compatibility library called FileSaver.js (github) that adds this function to browsers that support Blobs (except Internet Exlorer).

Mime types that (potentially) don't trigger a download when opened in a browser:

Blobs and saveAs (or saveBlob)

Currently only IE 10 supports this, but I hope other browsers will also implement the saveAs/saveBlob method eventually.

I don't assign saveAs to navigator.saveBlob (or the other way around) because I cannot know at this point whether future implementations require these methods to be called with 'this' assigned to window (or naviagator) in order to work. E.g. console.log won't work when not called with this === console.

Blobs and object URLs

Currently WebKit and Gecko support BlobBuilder and object URLs.

Currently only Chrome (since 14-dot-something) supports the download attribute for anchor elements.

Now I need to simulate a click on the link. IE 10 has the better msSaveBlob method and older IE versions do not support the BlobBuilder interface and object URLs, so we don't need the MS way to build an event object here.

In other browsers I open a new window with the object URL. In order to trigger a download I have to use the generic binary data mime type "application/octet-stream" for mime types that browsers would display otherwise. Of course the browser won't show a nice file name here.

The timeout is probably not necessary, but just in case that some browser handle the click/window.open asynchronously I don't revoke the object URL immediately.

Using the filesystem API you could do something very similar. However, I think this is only supported by Chrome right now and it is much more complicated than this solution. And chrome supports the download attribute anyway.

data:-URLs

IE does not support URLs longer than 2048 characters (actually bytes), so it is useless for data:-URLs. Also it seems not to support window.open in combination with data:-URLs at all.

Note that encodeURIComponent produces UTF-8 encoded text. The mime type should contain the charset=UTF-8 parameter. In case you don't want the data to be encoded as UTF-8 you could use escape(data) instead.

Internet Explorer before version 10 does not support any of the methods above. If it is text data you could show it in an textarea and tell the user to copy it into a text file.

A small example using the sowSave function:

See how it looks like.

Update: The BlobBuilder interface is now deprecated. Instead the Blob interface is new constructible. So in very recent browsers one can write:

But for compatibility with older versions of Firefox, Chrome/WebKit and Opera one has to support the BlobBuilder interface anyway. See the HTML5 File API.