Programmatical click on -tag not working in Firefox

Question

I have a problem with the click()-function from jquery. I create a <a>-element with document.createElement('a') and want call the click()-function about this element. About this element, I want to create an Excel-file and save this at the desktop.

My code:

$('body').on('click', '#test', function(event) {
    var link = document.createElement('a');
    link.download = 'test.xls';
    link.href = 'data:application/vnd.ms-excel;utf-8,test';
    link.click();
});

This function work under chrome, but not under Firefox.

Working example

Does anyone have any idea why that does not work?

This works for me on Firefox 72.0.2 on Ubuntu. Can anyone please provide link to some resource confirming the change? — M. Volf, Feb 07 '20 at 14:20

score 107 · Answer 1 · edited Apr 01 '18 at 10:52

107

In Firefox, you can explicitly add the created element to the DOM and it will work:

$('body').on('click', '#test', function(event) {
    var link = document.createElement('a');
    // Add the element to the DOM
    link.setAttribute("type", "hidden"); // make it hidden if needed
    link.download = 'test.xls';
    link.href = 'data:application/vnd.ms-excel;utf-8,test';
    document.body.appendChild(link);
    link.click();
    link.remove();
});

Fiddle

edited Apr 01 '18 at 10:52

Bruno Lemos

8,847
5
40
51

answered Aug 26 '15 at 12:00

lurker

56,987
9
69
103

@WhistleWhite that's great! Perhaps you could be so kind as to "accept" my answer by clicking the check mark. :) – lurker Sep 02 '15 at 13:15
@lurker var anchor=document.createElement('a') will gives var anchor=`` in firefox and in chrome var anchor='' . because there is no closing brackets in firefox thats why you can't able to perform click method ??? – Mahi Jan 24 '17 at 17:31
Is there any other way to do this in Firefox? (I don't want to append the link to the body) – IceWhisper Jan 16 '18 at 08:49
Setting type to hidden doesn't seem to have any effect. – Bruno Lemos Apr 01 '18 at 10:52
This works for Firefox and Chrome but not Safari as of 1 June 2017 – Blackstone4 Jun 01 '18 at 13:34
@Blackstone4 I don't have Safari on my machine. My answer does say, "In Firefox...". Gotta love HTML/browser "standards"... – lurker Jun 01 '18 at 13:36
@lurker yep.... [HTMLElement.click()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click) is not supported on Safari – Blackstone4 Jun 01 '18 at 14:03

score 99 · Answer 2 · edited May 08 '19 at 08:12

99

You don't have to add the element to the DOM, even in FireFox. Replace the .click() method with the following code:

link.dispatchEvent(new MouseEvent(`click`, {bubbles: true, cancelable: true, view: window}));

$('button').on('click', function(event) {
    var link = document.createElement('a');
    link.download = 'test.xls';
    link.href = 'data:application/vnd.ms-excel;utf-8,test';
    link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Download</button>

edited May 08 '19 at 08:12

Álvaro González

142,137
41
261
360

answered Jan 21 '18 at 14:17

Denis Giffeler

1,499
12
21

14

this is the more elegant solution in 2018. I tested in Chrome, Firefox, and Safari. – JP Lew Jul 19 '18 at 19:38
4

Does the second parameter really need? It works on mine with just `link.dispatchEvent(new MouseEvent('click'));` so I'll stick with it, or will there be something that I will miss? – dcangulo Sep 19 '18 at 08:55
3

Easily the most beautiful solution to my problem. Concise and works on every browser I tested so far. Chrome, Firefox, Edge, Opera – ak.leimrey Sep 19 '18 at 12:17
This is very nice, but `new MouseEvent` is not supported by Internet Explorer. There is a Polyfill needed (https://developer.mozilla.org/de/docs/Web/API/MouseEvent/MouseEvent#Polyfill) – HolgerJeromin Oct 25 '18 at 11:05
@ak.leimrey Does this really work in **Edge**? It seems to just dump the data URI to the console :-? – Álvaro González May 08 '19 at 08:08
1

@Álvaro González It indeed does work. It's what I used in a component of mine and so far the customer had no issue in downloading it, but I realized that it might have to do with polyfills. It's been a while since I used that solution. – ak.leimrey May 09 '19 at 08:23
1

@ÁlvaroGonzález Sorry, I just rechecked my project; There was indeed an issue with the implementation. I don't know what was the reason, I had to slightly change the way I'm using this. I think there was an issue with IE 11. – ak.leimrey May 14 '19 at 11:21
@ÁlvaroGonzález Thanks for adding a snippet of code. I have to say that I'm not a big fan of libraries like jQuery. – Denis Giffeler May 18 '19 at 09:25
These option, which are provided in example are redundant. They are not listed in mdn web [docs](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent) – tawreon Aug 14 '19 at 10:38

score 7 · Answer 3 · answered Nov 20 '18 at 09:11

7

Add the element to the DOM before triggering the click:

document.body.appendChild(link);
link.click();
document.body.removeChild(link);

This worked for me in all the major browsers

answered Nov 20 '18 at 09:11

Parul

119
2
3

score 0 · Answer 4 · answered Aug 26 '15 at 11:58

0

You can use jquery for creating the element. It will work on both the browsers

$(document).on('click', '#test', function (event) {
    var link = $("<a/>", {
        "download": "test.xls",
        "href": "data:application/vnd.ms-excel;utf-8,test"
    });
    $("#test").append(link);
    link.get(0).click();
});

Fiddle

answered Aug 26 '15 at 11:58

Anoop Joshi P

25,373
8
32
53

It's an infinite loop! – massic80 Feb 07 '20 at 09:52

score 0 · Answer 5 · answered Nov 26 '19 at 07:32

0

  var fileUrl=document.createElement('a');
      fileUrl.href=response.request.responseURL;
      document.body.appendChild(fileUrl);
      fileUrl.click();

add document body, thats working

answered Nov 26 '19 at 07:32

Asanka Sampath

545
4
12

I have issue with latest FireFox that it is failing because of Content Security Policy: The page’s settings blocked the loading of a resource at blob:https://FQDN/b234e319-3404-452c-907c-15d178010fc4 (“frame-src”) How to fix it? On Server it is using Tomcat – Vladimir B Jun 14 '23 at 13:32

Programmatical click on -tag not working in Firefox

5 Answers5

Linked