Javascript 使用 Safari 在本地下载 Blob
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12802109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Download blobs locally using Safari
提问by Erik
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;
我正在尝试找到一种跨浏览器的方式在 HTML5 中本地存储数据。我在 Blob 中生成了一大块数据（参见 MDN）。现在我想将此 Blob 移动到实际文件系统并将其保存在本地。我找到了以下方法来实现这一点；
- Use the
<a download>attribute. This works only in Chrome currently. - Microsoft introduces a
saveAsfunction in IE 10 which will achieve this. - Open the Blob URL in the browser and save it that way.
- 使用
<a download>属性。这目前仅适用于 Chrome。 - 微软
saveAs在 IE 10 中引入了一个功能来实现这一点。 - 在浏览器中打开 Blob URL 并以这种方式保存。
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.
不过，这些似乎都不适用于 Safari。虽然（1）作品在Chrome中，（2）在IE和（3）在Firefox的Safari 6没有一个作品下载属性尚未实现，并尝试使用该URL的Safari BLOB时抱怨的网址开头blob:是无效的 URL。
There is a good script that encapsulates (1) and (3) called FileSaver.jsbut that does not work using the latest Safari version.
有一个很好的脚本可以封装 (1) 和 (3)，称为FileSaver.js，但使用最新的 Safari 版本不起作用。
Is there a way to save Blobs locally in a cross browser fashion?
有没有办法以跨浏览器的方式在本地保存 Blob？
回答by naugtur
FileSaver.js has beed updated recentlyand it works on IE10, Safari5+ etc.
FileSaver.js最近更新了，它适用于 IE10、Safari5+ 等。
See: https://github.com/eligrey/FileSaver.js/#supported-browsers
请参阅：https: //github.com/eligrey/FileSaver.js/#supported-browsers
回答by malix
The file name sucks, but this works for me in Safari 8:
文件名很糟糕，但这在 Safari 8 中对我有用：
window.open('data:attachment/csv;charset=utf-8,' + encodeURI(csvString));
UPDATE: No longer working in Safari 9.x
更新：不再在 Safari 9.x 中工作
回答by forresto
The only solution that I have come up with is making a data: url instead. For me this looks like:
我想出的唯一解决方案是制作一个 data: url 。对我来说，这看起来像：
window.open("data:image/svg+xml," + encodeURIComponent(currentSVGString));
回答by Sam
Have you read this article? http://updates.html5rocks.com/2012/06/Don-t-Build-Blobs-Construct-Them
你读过这篇文章吗？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.
与http://caniuse.com/#search=blob 相关，blob 可以在 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.
您应该构造一个通过标准 http:// url 传递 blob 的 servlet，这样您就可以避免使用 blob: url。只需向该 url 发出请求并构建您的 blob。
Afterwards you can save it in your filesystem or local storage.
之后，您可以将其保存在文件系统或本地存储中。
回答by Apoorv
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.
这里的数据是在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);
回答by David
The download attribute is supported since ~safari 10.1, so currently this is the way to go.
从 ~safari 10.1 开始支持下载属性，所以目前这是要走的路。
