4

我正在尝试在 Angular 应用程序中创建一个下载链接，使模型中的数据可作为 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 的下载对话框。

非常感谢任何帮助

4

1 回答 1

2

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

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);

你可以在这里看到一个工作的小提琴

于 2013-10-08T18:43:11.287 回答