39

我正在尝试找到一种跨浏览器的方式在 HTML5 中本地存储数据。我在 Blob 中生成了一大块数据（请参阅 MDN）。现在我想将此 Blob 移动到实际的文件系统并保存在本地。我找到了以下方法来实现这一点；

  • 使用<a download>属性。这目前仅适用于 Chrome。
  • 微软saveAs在 IE 10 中引入了一个功能来实现这一点。
  • 在浏览器中打开 Blob URL 并以这种方式保存。

不过，这些似乎都不适用于 Safari。虽然（1）适用于 Chrome，（2）适用于 IE 和（3）适用于 Firefox，但没有人适用于 Safari 6。下载属性尚未实现，当尝试使用 URL 打开 blob 时，Safari 会抱怨开头的 URLblob:是无效的网址。

有一个很好的脚本，它封装了 (1) 和 (3)，称为FileSaver.js，但在使用最新的 Safari 版本时不起作用。

有没有办法以跨浏览器的方式在本地保存 Blob？

4

6 回答 6

22

FileSaver.js最近更新了，它适用于 IE10、Safari5+ 等。

请参阅：https ://github.com/eligrey/FileSaver.js/#supported-browsers

于 2013-02-13T16:34:32.827 回答
7

文件名很烂，但这在 Safari 8 中对我有用：

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

更新：不再在 Safari 9.x 中工作

于 2015-04-08T06:50:43.110 回答
4

我想出的唯一解决方案是制作一个 data: url 。对我来说，这看起来像：

window.open("data:image/svg+xml," + encodeURIComponent(currentSVGString));
于 2013-02-07T06:36:08.990 回答
3

这里的 data 是在 js 中进行 http rest 调用时来自响应的数组缓冲区数据。这在 safari 中有效，但是文件名可能存在一些问题，因为它是无标题的。

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);
于 2017-02-16T09:53:34.687 回答
2

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.

于 2013-02-12T16:01:12.867 回答
0

从 ~safari 10.1 开始支持下载属性，所以目前这是要走的路。

于 2019-09-12T16:04:50.723 回答