Programmatical click on <a>-tag not working in Firefox

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

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>