Trouble with firing the click event using document.createElement('a') in Firefox

Question

Trouble with firing the click event using document.createElement('a') in Firefox

I wrote a function that fetches arraybuffer data from my API, generates a temporary anchor element on the webpage, and then triggers a click event to download the file.

Interestingly, this function performs as expected in 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();
  }

The usage of @action is derived from mobx. However, when testing this functionality in Firefox, the second console log (before click link) appears in the browser console (first log displays the data correctly), but the download process fails to initiate.

I’m puzzled by this issue – any insights on what might be going wrong?

javascript firefox

Answer 1

Answer №1

If you want to make it work in Firefox, simply ensure the created element is added to the DOM:

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

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

Check out the codepen example - http://jsfiddle.net/b40af6rm/

Answer 2

If you want to make it work in Firefox, simply ensure the created element is added to the DOM:

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

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

Check out the codepen example - http://jsfiddle.net/b40af6rm/

Trouble with firing the click event using document.createElement('a') in Firefox

Answer №1

Similar questions

Javascript Code Tweaking... Is it Just a Minor Oversight?

Communication with child processes in node.js is not done using the child_process module

Error: Unable to access the 'version' property of null

What is the method for adding pages to the ion-nav component in Ionic with Angular?

Using JavaScript to develop a demonstration of the capabilities of Microsoft's Cognitive

Locate the index of each distinct element within the array

Is it possible to dynamically create input fields in AngularJS by clicking a button?

The useEffect hook is failing to resolve a promise

Building a Div Tag Layout with CSS for Full Width and Left Position of 300px

"Unexpected error: .jqm is not defined as a

Manipulating classes within ng-class in AngularChanging classes in ng-class dynamically

Getting URL parameters in NextJS when using Custom Document can be achieved by accessing the `ctx`

Node and Web scraping Promise: a powerful combination

Transform Objects Array from AJAX Response into a Distinct JSON Entity

An HTML document may display a segment of a URL

Ending an $.ajax request when the page is exited

Implementing an onclick event listener in combination with an AJAX API call

What is the most effective method for pausing execution until a variable is assigned a value?

What is the best way to extract information from a JSON XHR request and incorporate it into my template?

Trouble arises when incorporating a new feature onto a map with OpenLayers and Vue.js