Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Download blobs locally using Safari

I'm trying to find a cross browser way to store data locally in HTML5. I have generated a chunk of data in a Blob (see MDN). Now I want to move this Blob to the actual filesystem and save it locally. I've found the following ways to achieve this;

  • Use the <a download> attribute. This works only in Chrome currently.
  • Microsoft introduces a saveAs function in IE 10 which will achieve this.
  • Open the Blob URL in the browser and save it that way.

None of these seems to work in Safari though. While (1) works in Chrome, (2) in IE and (3) in Firefox no one works in Safari 6. The download attribute is not yet implemented and when trying to open a blob using the URL Safari complains that URLs starting with blob: are not valid URLs.

There is a good script that encapsulates (1) and (3) called FileSaver.js but that does not work using the latest Safari version.

Is there a way to save Blobs locally in a cross browser fashion?

like image 214
Erik Avatar asked Oct 09 '12 14:10

Erik


People also ask

What are blobs HTML?

The Blob object represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a ReadableStream so its methods can be used for processing the data. Blobs can represent data that isn't necessarily in a JavaScript-native format.


2 Answers

FileSaver.js has beed updated recently and it works on IE10, Safari5+ etc.

See: https://github.com/eligrey/FileSaver.js/#supported-browsers

like image 151
naugtur Avatar answered Sep 20 '22 02:09

naugtur


The file name sucks, but this works for me in Safari 8:

        window.open('data:attachment/csv;charset=utf-8,' + encodeURI(csvString)); 

UPDATE: No longer working in Safari 9.x

like image 38
malix Avatar answered Sep 19 '22 02:09

malix