Question

我正在尝试在角度应用中创建下载链接，使模型中的数据可以下载为CSV文件。除了实际的下载链接之外，我都能正常工作。使用filesaver.js正在吹嘘Karma中的单元测试，所以我正在探索手动操作。

以下是我所拥有的。在控制器中：

var blob = new Blob([data.join('\n')], {type: 'text/csv;charset=utf-8'});
$scope.downloadUrl = URL.createObjectURL(blob);

在视图中，我有：

<a ng-href="{{downloadUrl}}" download="ttester.csv" id="download">Download</a>

问题是这会在Firefox 20中打开一个新页面，其URL为“unsafe：blob：af775c64-dcb1-864a-8eaa-adebe7f101a7”，请注意“unsafe：”前缀。删除该前缀会正确下载数据，但没有我想要的文件名。

我的超链接中缺少哪些内容才能使其正常工作？我希望它打开一个文件名为tester.csv的下载对话框。

非常感谢任何帮助

Answer 1

您可以使用以下代码创建blob，伪链接并在此虚假链接上调度click事件。请注意，不应打开新页面，但会直接通过保存对话框提示您。

var blob = new Blob([data.join('\n')], {type: 'text/csv;charset=utf-8'});
var url  = window.URL || window.webkitURL;
var link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
link.href = url.createObjectURL(blob);
link.download = 'teams.csv'; // whatever file name you want :)

var event = document.createEvent("MouseEvents");
event.initEvent("click", true, false);
link.dispatchEvent(event);

你可以看到一个有效的小提琴here

如何在没有Firefox添加“不安全”前缀的情况下链接到数据URL

1 个答案: