Programmatischen klicken Sie auf <a>-tag funktioniert nicht im Firefox

Ich habe ein problem mit der click()-Funktion von jquery. Ich erstelle ein <a>-element mit document.createElement('a') wollen und rufen Sie die click()-Funktion zu diesem element. Über dieses element, ich möchte erstellen Sie eine Excel-Datei und speichern Sie diese auf dem desktop.

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, aber nicht unter Firefox.

Beispiel

Hat jemand eine Idee warum das nicht funktioniert?

InformationsquelleAutor WhistleWhite | 2015-08-26

91

In Firefox, können Sie explizit fügen Sie das erstellte element an den DOM und es wird funktionieren:
```
$('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
- das ist toll! Vielleicht könnten Sie so freundlich sein Sie zu "akzeptieren" meiner Antwort, indem Sie auf das Häkchen. 🙂
- Danke. Es hat gut funktioniert....
- var Anker=document.createElement('a') gibt var Anker=<a> im firefox und in chrome var Anker='<a></a>' . weil es keine schließenden Klammern in firefox, das ist, warum Sie nicht durchführen zu können klicken Sie auf-Methode ???
- Gibt es irgendeine andere Möglichkeit, dies zu tun in Firefox? (Ich don ' T wollen, fügen Sie den link, um den Körper)
- Die Festlegung der Art der zu versteckten nicht scheinen, um eine Wirkung.
- Dies funktioniert für Firefox und Chrome, aber nicht mit Safari 1. Juni 2017
- Ich glaube nicht, dass Safari auf meinem Rechner. Meine Antwort heißt, "In Firefox...". Gotta love HTML/browser - "standards"...
- yep.... HTMLElement.klicken Sie auf() wird nicht unterstützt auf Safari
InformationsquelleAutor lurker
67

Du musst nicht fügen Sie das element an den DOM, sogar in FireFox.
Ersetzen Sie die .klicken Sie auf () - Methode durch den folgenden code:
```
link.dispatchEvent(new MouseEvent(`click`, {bubbles: true, cancelable: true, view: window}));
```
JS:
```
$('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}));
});
```
HTML:
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Download</button>
```
- dies ist die elegantere Lösung im Jahr 2018. Ich habe das getestet in Chrome, Firefox und Safari.
- Dies funktioniert zwar in allen gängigen Browsern.
- Ja, das funktioniert wie ein champ!
- Hat der zweite parameter wirklich benötigen? Es funktioniert auf meinem mit nur link.dispatchEvent(new MouseEvent('click')); also werde ich dabei bleiben, oder gibt es etwas, das ich vermissen werde?
- Einfach die schönste Lösung für mein problem. Präzise und funktioniert auf jedem browser, die ich bisher getestet. Chrome, Firefox, Edge, Opera
- Das ist sehr schön, aber new MouseEvent wird nicht von Internet Explorer unterstützt. Es ist ein Polyfill benötigt (developer.mozilla.org/de/docs/Web/API/MouseEvent/...)
- Bedeutet das wirklich, die Arbeit in Edge? Es scheint nur dump die Daten-URI für die Konsole 😕
- González Es tatsächlich funktioniert. Es ist das, was ich in einer Komponente von mir und so weit der Kunde hatte kein Problem beim herunterladen, aber ich erkannte, dass es vielleicht zu tun haben mit polyfills. Es ist schon eine Weile her, seit ich verwendet, die Lösung.
- Sorry, ich habe gerade nochmals überprüft mein Projekt; Es war in der Tat ein Problem mit der Umsetzung. Ich weiß nicht, was der Grund war, ich musste etwas ändern, wie ich bin mit diesem. Ich denke, es war ein Problem mit dem IE 11.
- Vielen Dank für das hinzufügen von code. Ich muss sagen, dass ich nicht bin ein großer fan von Bibliotheken wie jQuery.
InformationsquelleAutor Denis Giffeler
6

Fügen Sie das element an den DOM vor Auslösung der Klick:
```
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
```
Dieser arbeitete für mich, in allen wichtigen Browsern
- Duplikat von stackoverflow.com/a/32226068/389424
InformationsquelleAutor Parul

Können Sie verwenden jquery für die Erstellung des Elements. Es werden sowohl die arbeiten für den 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();
});