javascript - font - js chart min js

Programatical clic en la etiqueta<a>-tag no funciona en Firefox

Question

Tengo un problema con la función click() de jquery. Creo un elemento <a> con document.createElement(''a'') y quiero llamar a la función click() sobre este elemento. Acerca de este elemento, quiero crear un archivo de Excel y guardarlo en el escritorio.

Mi código:

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

Esta función funciona en chrome, pero no en Firefox.

Ejemplo de trabajo

¿Alguien tiene alguna idea de por qué eso no funciona?

Answer 1

En Firefox, puede agregar explícitamente el elemento creado al DOM y funcionará:

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

No es necesario agregar el elemento al DOM, incluso en Firefox. Reemplace el método .click () con el siguiente código:

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

Answer 3

Puedes usar jquery para crear el elemento. Funcionará en ambos navegadores.

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