a href download attribute doesn't working in latest safari Version 12.1 13607.1.40.1.5

I'm setting up a new download xml file web application and want to provide link to download xml file client-side with Javascript.

According to caniuse.com ( https://caniuse.com/#search=download), Safari > 10.1 supports the download attribute. Unfortunately, this doesn't seem to work in case of safari as compared to other browser like chrome , firefox. Basically after clicking on a href element it goes to next screen and download doesn't happen.


I have written the following a href script for this purpose.


          var link = document.createElement("a"); 
link.download = filename;
link.target = "_blank";
// Construct the URI
link.href = DOWNLOAD_URL;
document.body.appendChild(link);
link.click();
// Cleanup the DOM
document.body.removeChild(link);


To make it working, what i did is added timeout on click event as show in below code and it started working. Please check -

var link = document.createElement("a");
link.download = filename;
link.target = "_blank";
// Construct the URI
link.href = DOWNLOAD_URL;
document.body.appendChild(link);
setTimeout(function() {
link.click();
// Cleanup the DOM
document.body.removeChild(link);
DOWNLOAD_COMPLETED = true;
document.getElementById('nextButton').onclick();
}, 500);

What i want to understand why safari behaves differntly as compare to other browser. Looks like safari internal implementation of download attribute is async to some extentDo I make an error in my download script? Can you help me? Thanks a lot!

Replies

Adding setTimeout would work fine only if you do not have forloop.
If you have multiple documents to be downloaded and you are iterating over while loop, then this SetTimout would be applied for first iteration and all remaining iterations would be executed without any delay.
We have to change this delay technique somehow.


See how it should be as follows:


Array.forEach((element, index) =>{

var link = document.createElement("a"); 
link.download = filename;
link.target = "_blank";
// Construct the URI
link.href = DOWNLOAD_URL;
document.body.appendChild(link);
setTimeout(function() {
link.click();
// Cleanup the DOM
document.body.removeChild(link);
DOWNLOAD_COMPLETED = true;
document.getElementById('nextButton').onclick();
}, 500*index);


});


in this way we would add delay in each iteration of forloop.
Would be helpfull if anyone is looking for multiple downloads on the single button