Fare clic su programmatico su <a> -tag non funziona in Firefox

Question

Ho un problema con la funzione click() da jQuery. Creo un <a> -elemento con document.createElement('a') e voglio chiamare la funzione click() su questo elemento. Su questo elemento voglio creare un file Excel e salvarlo sul desktop.

Il mio codice:

$('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(); 
}); 

Questa funzione opera in Chrome, ma non sotto firefox.

esempio di lavoro: http://jsfiddle.net/0hnuw6b4/1/

Qualcuno ha qualche idea del perché non funziona?

Answer 1

È possibile utilizzare jquery per creare l'elemento. Si lavorerà su entrambi i browser

$(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

Answer 2

In Firefox, è possibile aggiungere in modo esplicito l'elemento creato per il DOM e funzionerà:

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

Fiddle

Answer 3

È non è necessario aggiungere l'elemento al DOM, anche in FireFox. Sostituire il metodo .click() con il seguente codice:

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