Kích hoạt nhấp vào yếu tố được tạo động bởi AngularJS

Question

Tôi đang sử dụng AngularJS để tạo thẻ mới để tải xuống tệp csv. Bên dưới mã tôi sử dụng để kích hoạt tải xuống. Quá trình tải xuống bắt đầu trên Chrome nhưng không bắt đầu trong Firefox. Bạn có bất kỳ đầu mối nào tại sao điều này xảy ra không?

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

EDIT: Firefox cần một DOM tồn tại

JS:

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

HTML:

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

EDIT 2: Mở Chrome, tên tập tin tải về là "tải xuống" và không t giá trị đã truyền ("test.csv" trong trường hợp này). Bất kỳ đề xuất?

Đây đó cũng là một plunker

Answer 1

Đây là một lỗi trong Chrome 35 báo cáo trong issue #377860.

Thực hiện theo this câu trả lời để biết thêm chi tiết

tôi cập nhật giải pháp plunker của bạn.

Về cơ bản bạn cần phải sử dụng nó như sau:

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

Answer 2

Để có được cả Chrome & FF để làm việc, tôi thực sự thấy rằng tôi đã phải kiểm tra đầu tiên để xem nếu yếu tố [0] là không xác định (mà nó đã ở trong Chrome chứ không phải FF):

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