【问题标题】:Saving CSV file using blob in Safari在 Safari 中使用 blob 保存 CSV 文件
【发布时间】:2015-04-22 13:51:11
【问题描述】:

我有下面的代码来生成下载链接,以便用户可以在我的网站上下载 .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);

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

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

== 更新 ==
在此处查找解决方案
solution 1, solution 2

代码将是:

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 会为用户下载文件,但是文件名是unknown,可能是因为 Safari 还不支持 'download' 属性,正如raphael 提到的那样。

【问题讨论】:

  • HTML 看起来如何(尤其是链接以 csvUrl 作为 href)?
  • 感谢您的回复。我已经更新了代码 sn-p。我在 JS 中创建链接元素,并直接将包含 csvUrl 的属性设置为该下载链接。
  • 我为您的问题创建了一个 JSFiddle:jsfiddle.net/628mmkww/2 - 看起来 Safari 不支持您的需求。

标签: javascript jquery csv safari


【解决方案1】:

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

您的解决方案在 Chrome(和 Firefox)中有效的原因是它们 support the download attribute - Safari 还没有。

【讨论】:

【解决方案2】:

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

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

【讨论】:

  • 然而Safari IOS 还不支持这个
猜你喜欢
  • 1970-01-01
  • 2014-03-11
  • 2019-08-06
  • 2021-02-27
  • 1970-01-01
  • 2012-07-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多