Blob Createobjecturl Download Not Working in Firefox (But Works When Debugging)

Blob createObjectURL download not working in Firefox (but works when debugging)

You're probably removing the resource too soon, try delaying it

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

Problem downloading a PDF blob in JavaScript

I can't tell for sure why your code doesn't work, but I can tell for sure that what you are doing is useless at best.

Do not convert a Blob to a dataURI, 99%* of the time, what you want to do with this dataURI can be done directly with the original Blob and a blobURI.

^{*The remaining 1% being when you need to create standalone documents that will include binary data, it happens but not that often.}

Here, once again what you want to do (set an anchor to point to your Blob's data) can be done with the Blob directly: simply create a blobURI (which is just a pointer to the data in memory) by calling URL.createObjectURL(blob).

const downloadFile = (blob, fileName) => {
  const link = document.createElement('a');
  // create a blobURI pointing to our Blob
  link.href = URL.createObjectURL(blob);
  link.download = fileName;
  // some browser needs the anchor to be in the doc
  document.body.append(link);
  link.click();
  link.remove();
  // in case the Blob uses a lot of memory
  setTimeout(() => URL.revokeObjectURL(link.href), 7000);
};


downloadFile(new Blob(['random data']), "myfile.txt");

Firefox a.click won't fire without a breakpoint

Firefox has a couple of safeguards or just odd behaviors around things like this. I don't know the derivation, but yielding back to the browser for a moment before doing the click usually clears it up:

// ...
a.href = objectUrl;
document.body.appendChild(a);
setTimeout(function() {
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(objectUrl);
}, 0);
// ...

Note that code following the setTimeout will run before the content of the setTimeout does.

You might even need two:

// ...
a.href = objectUrl;
document.body.appendChild(a);
setTimeout(function() {
    a.click();
    setTimeout(function() {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(objectUrl);
    }, 0);
}, 0);
// ...

cant download blob always (using reactjs)

I needed a delay:

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

Took the answer from this: Blob createObjectURL download not working in Firefox (but works when debugging)

URL.createObjectURL(blob) not creating proper URL in IE 11

IE does not create a url for these blob objects because of security reasons i think.So using var objectUrl = URL.createObjectURL(blob);will not give you the source url which you can use inside iframe or embed tag.
I faced the same issue and searched a lot about the fix.But could not get the answer.Instead i solved it as following.
you can use the following for IE

if (bowser.msie && window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveOrOpenBlob(file, fileName);
}else{
    //do what you were doing for other than IE
}

the above IE code will prompt the user that whether he wants to save the file or directly open it.
User can click on button 'open' and then IE will show the PDF without downloading it in default reader.

Blob Createobjecturl Download Not Working in Firefox (But Works When Debugging)