Question

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

使用<a download>属性。目前仅适用于Chrome。
Microsoft在IE 10中引入了saveAs功能，可实现此功能。
在浏览器中打开Blob URL并以此方式保存。

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

有一个很好的脚本封装了（1）和（3），称为FileSaver.js，但使用最新的Safari版本无效。

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

Answer 1

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

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

Answer 2

文件名很糟糕，但这在Safari 8中适用于我：

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

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

Answer 3

我提出的唯一解决方案是创建数据：url。对我来说，这看起来像：

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

Answer 4

你读过这篇文章吗？ http://updates.html5rocks.com/2012/06/Don-t-Build-Blobs-Construct-Them

与http://caniuse.com/#search=blob有关，可以在safari中使用blob。

你应该构建一个servlet，它通过标准的http：// url传递blob，这样你就可以避免使用blob：url了。只需向该网址发出请求并构建您的blob。

之后，您可以将其保存在文件系统或本地存储中。

Answer 5

这里的数据是来自响应的数组缓冲区数据，同时在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);

Answer 6

从〜safari 10.1开始支持下载属性，因此目前是可行的方法。

使用Safari在本地下载blob

6 个答案: