触发单击由 AngularJS 动态创建的元素答案

【问题标题】：Trigger click on element dynamically created by AngularJS触发单击由 AngularJS 动态创建的元素
【发布时间】：2014-05-22 07:17:47
【问题描述】：

我正在使用 AngularJS 创建一个新标签以下载 csv 文件。在我用来触发下载的代码下方。下载会在 Chrome 上开始，但不会在 Firefox 上开始。你知道为什么会发生这种情况吗？

var element = angular.element('<a/>');
element.attr({
   href: exportedString,
   target: '_self',
   download: 'test.csv'
})[0].click();

编辑： Firefox 需要一个现有的 DOM

JS：

var linkElem = $("#link");
var element = angular.element(linkElem);

HTML：

<a ng-hide=true id="link"></a>

编辑 2： 在 Chrome 上，下载的文件名为“download”，而不是传递的值（在本例中为“test.csv”）。有什么建议吗？

这里还有一个plunker

【问题讨论】：

我想知道这是否可能是最新 Chrome 中的错误...

标签： angularjs google-chrome firefox click

【解决方案1】：

这是issue #377860 中报告的 Chrome 35 中的一个错误。

关注this答案了解更多详情

我更新了您的plunker 解决方案。

基本上你需要像下面这样使用它：

var element = document.createElement('a');
var blob = new Blob([$scope.exportContent], {
  type: 'text/csv'
});
var url = URL.createObjectURL(blob);
element.href = url;
element.setAttribute('download', 'test.csv');
document.body.appendChild(element); //Append the element to work in firefox
element.click();

【讨论】：

【解决方案2】：

为了让 Chrome 和 FF 都能正常工作，我实际上发现我必须首先检查 element[0] 是否未定义（它在 Chrome 中但不是 FF）：

var link = $("#reportDownloadLink");
var element = angular.element(link)
    .attr('href', dataUrl)
    .attr('download', data.FileDownloadName)
    .attr('target', '_blank');
(element[0] || element).click();

【讨论】：