it-swarm.com.de

Programmatischer Klick auf <a> -Tag funktioniert in Firefox nicht

Ich habe ein Problem mit der Funktion click()- von jquery. Ich erstelle ein <a> - Element mit document.createElement('a') und möchte die click()- Funktion für dieses Element aufrufen. Über dieses Element möchte ich eine Excel-Datei erstellen und diese auf dem Desktop speichern.

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

Diese Funktion funktioniert unter Chrome, jedoch nicht unter Firefox.

Arbeitsbeispiel

Hat jemand eine Idee warum das nicht geht?

45
WhistleWhite

In Firefox können Sie das erstellte Element explizit zum DOM hinzufügen, und es funktioniert:

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

Geige

98
lurker

Sie müssen das Element auch in FireFox nicht zum DOM hinzufügen. Ersetzen Sie die .click () -Methode durch den folgenden 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>
82
Denis Giffeler

Fügen Sie das Element dem DOM hinzu, bevor Sie den Klick auslösen:

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

Dies funktionierte für mich in allen gängigen Browsern

7
Parul

Sie können jquery zum Erstellen des Elements verwenden. Es wird auf beiden Browsern funktionieren

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

1
Anoop Joshi