Программный щелчок на <a>-tag не работает в Firefox

У меня проблема с click() -function из jquery. Я создаю <a> -element с document.createElement('a') и хочу вызвать click() -function для этого элемента. Об этом элементе я хочу создать Excel файл и сохранить его на рабочем столе.

Мой код:

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

Эта функция работает под Chrome, но не под Firefox.

Рабочий пример

У кого-нибудь есть идеи, почему это не работает?

Ответы

Ответ 1

В Firefox вы можете явно добавить созданный элемент в DOM, и он будет работать:

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

скрипка

Ответ 2

Вам не нужно добавлять элемент в DOM, даже в FireFox. Замените метод .click() следующим кодом:

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>

Ответ 3

Добавьте элемент в DOM, прежде чем запускать клик:

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

Это работало для меня во всех основных браузерах

Ответ 4

Вы можете использовать jquery для создания элемента. Он будет работать как в браузерах

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