javascript 在 Safari 中使用 blob 保存 CSV 文件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29799696/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 11:05:42  来源:igfitidea点击:

Saving CSV file using blob in Safari

javascriptjquerycsvsafari

提问by Calvin Jeng

I have codes below to generate the download link so that users could download the .csv file on my site.

我有下面的代码来生成下载链接,以便用户可以在我的网站上下载 .csv 文件。

var link = document.createElement("a");
link.id = "csvDwnLink";
window.URL = window.URL || window.webkitURL;

var csv = "\ufeff" + CSV,
    blob = new window.Blob([csv], {type: 'text/csv, charset=UTF-8'}),
    csvUrl = window.URL.createObjectURL(blob),
    filename = 'export.csv';

$("#csvDwnLink").attr({'download': filename, 'href': csvUrl});
$('#csvDwnLink')[0].click();
document.body.removeChild(link);

I hope the user could click the download link with csvUrlto download the cvs file.
It works on chrome. However, when I click the same link using Safari, it will directly show me the content of the csv file in the tab.

我希望用户可以单击下载链接csvUrl以下载 cvs 文件。
它适用于铬。但是,当我使用 Safari 单击同一链接时,它会直接在选项卡中显示 csv 文件的内容。

How do I solve this problem so that the safari will show the saving file window which user could select the path where they want to save the file instead of showing the content of the cvs file directly when I click the download link?
Hope someone could me some recommendations or alternative methods.
Thanks in advance!

我如何解决这个问题,以便 safari 将显示保存文件窗口,用户可以选择他们想要保存文件的路径,而不是在我单击下载链接时直接显示 cvs 文件的内容?
希望有人能给我一些建议或替代方法。
提前致谢!

== Updated ==
Find out solutions here
solution 1, solution 2

== 更新 ==
在这里找到解决
方案 解决方案 1解决方案 2

The code will be:

代码将是:

var link = document.createElement("a");
link.id = "csvDwnLink";

document.body.appendChild(link);
window.URL = window.URL || window.webkitURL;
var csv = "\ufeff" + CSV,
    csvData = 'data:attachment/csv;charset=utf-8,' + encodeURIComponent(csv),
    filename = 'filename.csv';
$("#csvDwnLink").attr({'download': filename, 'href': csvData});
$('#csvDwnLink')[0].click();
document.body.removeChild(link);

Safari will download the file for the user, however, the file name will be unknown, probably it's because Safari don't support 'download' attribute yet as raphaelmentioned.

Safari 将为用户下载文件,但是,文件名将是unknown,可能是因为 Safari 尚不支持“下载”属性,raphael如上所述。

回答by Raphael Müller

I did a quick research - I looks like Safari does not support what you are trying to achieve.

我做了一个快速的研究 - 我看起来 Safari 不支持你想要实现的目标。

The reason why your solution works in Chrome (and Firefox) is that they support the download attribute- Safari doesn't yet.

您的解决方案适用于 Chrome(和 Firefox)的原因是它们支持下载属性- Safari 尚不支持。

回答by Tayfun Ya?ar

Safari 10.1+ supports "download" attribute. It should work now.

Safari 10.1+ 支持“下载”属性。它现在应该可以工作了。

https://github.com/eligrey/FileSaver.js/issues/129#issuecomment-275221240

https://github.com/eligrey/FileSaver.js/issues/129#issuecomment-275221240