web-dev-qa-db-fra.com

Cliquez par programme sur <a> -tag ne fonctionne pas dans Firefox

J'ai un problème avec la fonction click()- de jquery. Je crée un élément <a> - avec document.createElement('a') et je veux appeler la fonction click()- sur cet élément. À propos de cet élément, je veux créer un fichier Excel et l'enregistrer sur le bureau.

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

Cette fonction fonctionne sous Chrome, mais pas sous Firefox.

Exemple de travail

Quelqu'un sait-il pourquoi cela ne fonctionne pas?

javascriptjqueryfirefoxclick
45
WhistleWhite

Dans Firefox, vous pouvez explicitement ajouter l'élément créé au DOM et cela fonctionnera:

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

Violon

98
lurker

Vous n'avez pas besoin d'ajouter l'élément au DOM, même dans FireFox. Remplacez la méthode .click () par le code suivant:

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>
82
Denis Giffeler

Ajoutez l'élément au DOM avant de déclencher le clic:

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

Cela a fonctionné pour moi dans tous les principaux navigateurs

7
Parul

Vous pouvez utiliser jquery pour créer l'élément. Cela fonctionnera sur les deux navigateurs

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

Violon

1
Anoop Joshi