document.createElement ('a'). click () не работает в Firefox

Question

У меня есть функция, которая извлекает данные из массива буфера из моего API, создает временную привязку на странице и затем щелкает по ней, чтобы загрузить файл.

Функция работает в Chrome, как и ожидалось.

@action
  async loadVoucher(id, fiscalId) {
    const pdf = await this.httpClient.get(...);

    console.log("load Voucher: ", pdf);

    const blob = new Blob([pdf.data], { type: "application/pdf" });
    var link = document.createElement("a");
    link.href = window.URL.createObjectURL(blob);
    link.download = "Dossier_" + new Date() + ".pdf";

    console.log("before link click");

    link.click();
    link.remove();
  }

Декоратор @action поставляется с MOBX.В Firefox второй файл console.log - перед нажатием на ссылку регистрируется в консоли браузера (первый журнал также регистрирует мои данные правильно), но загрузка не начинается.

Что я делаю не так?

Answer 1

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

<div class="button" id="test">Create File</div>

    $('body').on('click', '#test', function(event) {
        var link = document.createElement('a');
        // Add the element to the DOM
        document.body.appendChild(link);
        link.setAttribute("type", "hidden"); // make it hidden if needed
        link.download = 'test.xls';
        link.href = 'data:application/vnd.ms-excel;utf-8,test';
        link.click();
    });

codepen - http://jsfiddle.net/b40af6rm/