Programmatical click on <a>-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?

Answer 1

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

Answer 2

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>

Answer 3

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