Trigger click on element dynamically created by AngularJS

Question

I'm using AngularJS to create a new tag in order to download a csv file. Below the code I use to trigger the download. The download starts on Chrome but not in Firefox. Do you have any clue why this happens?

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

EDIT: Firefox needs an existent DOM

JS:

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

HTML:

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

EDIT 2: On Chrome, the downloaded file name is "download" and not the passed value ("test.csv" in this case). Any suggestions?

Here there is also a plunker

I wonder if it could be a bug in latest Chrome...

gkalpak
– gkalpak

2014-05-26 13:52:07 +00:00
Commented May 26, 2014 at 13:52 — gkalpak
– gkalpak, Commented May 26, 2014 at 13:52

Community · Accepted Answer · 2017-05-23 12:32:50Z

4

This is a bug in Chrome 35 reported in issue #377860.

Follow this answer for more details

I updated your plunker solution.

Basically you need to use it like follow:

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

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Jul 18, 2014 at 22:47

nramirez

5,6702 gold badges25 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oleg Fridman · Accepted Answer · 2015-05-07 07:01:33Z

0

To get both Chrome & FF to work, I actually found that I had to first check to see if element[0] was undefined (which it was in Chrome but not FF):

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

answered May 7, 2015 at 7:01

Oleg Fridman

1,65817 silver badges16 bronze badges

Collectives™ on Stack Overflow

Trigger click on element dynamically created by AngularJS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related