Download blobs locally using Safari

Question

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 file

Answer 1

The only solution that I have come up with is making a data: url instead. For me this looks like:

window.open("data:image/svg+xml," + encodeURIComponent(currentSVGString));

Answer 2

Here data is the array buffer data coming from response while making http rest call in js. This works in safari, however there might me some issue in filename as it comes to be untitled.

var binary = '';
var bytes = new Uint8Array(data);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
}

var base64 = 'data:' + contentType + ';base64,' + window.btoa(binary);
var uri = encodeURI(base64);
var anchor = document.createElement('a');
document.body.appendChild(anchor);
anchor.href = uri;
anchor.download = fileName;
anchor.click();
document.body.removeChild(anchor);

Answer 3

Have you read this article? http://updates.html5rocks.com/2012/06/Don-t-Build-Blobs-Construct-Them

Relating to http://caniuse.com/#search=blob, blobs are possible to use in safari.

You should consturct a servlet which delivers the blob via standard http:// url, so you can avoid using blob: url. Just make a request to that url and build your blob.

Afterwards you can save it in your filesystem or local storage.

Answer 4

The download attribute is supported since ~safari 10.1, so currently this is the way to go.

Answer 5

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

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

Answer 6

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