browser doesn't show progress bar when downloading a file

function getSound(sound) {
    var req = new XMLHttpRequest();
    req.open("GET", sound, true);
    req.responseType = "blob";
    req.onload = function (event) {
        var blob = req.response;//if you have the fileName header available
        var link=document.createElement('a');
        link.href=window.URL.createObjectURL(blob);
        link.download='sound.mp3';
        link.click();
    };
    req.send();
}

I want show like this

CodePudding user response：

The issue is that by the time you call 'click' the file is already downloaded. But you didn't need to download the file in advance:

function getSound(sound) {
  const link=document.createElement('a');
  link.href=sound;
  link.download='sound.mp3';
  link.click();
}

CodePudding user response：

You have to add Content-Lenght header to let the web browser know the size of your file.