Trigger download of Blob

Question

I have a csv file that is generated on my backend, and the API requires I do a POST to trigger the generation of the file. Which is slightly problematic as is. Fortunately kinda, I stumble across a mix-match of methods that seems to be the general play to use for something like this by a good handful of people. Unfortunately I this doesn't appear to work on Firefox, and maybe other browsers. I know it works perfect in Chrome but I am wondering if its chrome that it will work in or if its just not working in firefox for some reason. Below is the code I have thus far, I've manually changed a couple variables trying to make sense of them here. But anyone have any ideas? Is this something that just can't be done?

    $.ajax({
        url: '/api?id=' + post_file_id,
        "async": true,
        "crossDomain": true,
        "method": "GET",
        "headers": {
            "cache-control": "no-cache",
        },
        "processData": false,
    }).done((response) => {
        let a = document.createElement("a");
        document.body.appendChild(a);
        a.style = "display: none";

        let blob = new Blob([response], {type: "text/csv;charset=utf-8;"});
        let url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = 'download-' + post_file_.replace(' ', '_') + '.csv';
        a.click();
        window.URL.revokeObjectURL(url);
        //document.body.removeChild(a);

    }).fail(() => {
        this._showStatusAlertBox('error', 'There is no data for post.');
    });
}

Answer 1

Maybe you need some delay. Try with:

a.click();
setTimeout(function(){
   document.body.removeChild(a);
   window.URL.revokeObjectURL(url);  
}, 100);