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

JavascriptFirefoxDownloadBlob

Javascript Problem Overview


I have an odd problem, the function below is one I created based on what i found on the net about creating a Blob in the client on the fly with some binary data in (passed as an array) and being able to download that. This works brilliantly in Chrome, but doesn't do anything in Firefox - UNLESS I debug and step through the code. Yes, oddly, if I create a break point inside the function and step through it, the a.click() will bring up the download window!

function downloadFile(filename, data) {

	var a = document.createElement('a');
	a.style = "display: none";	
	var blob = new Blob(data, {type: "application/octet-stream"});
	var	url = window.URL.createObjectURL(blob);
	a.href = url;
	a.download = filename;
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);
	window.URL.revokeObjectURL(url);	
}

Can anyone help me? This was tested using Firefox 38.0.5.

Javascript Solutions


Solution 1 - Javascript

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

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

Solution 2 - Javascript

The above didn't solve the issue for me. But this one did instead:
https://stackoverflow.com/questions/32225904/programmatical-click-on-a-tag-not-working-in-firefox#
It was a problem with the triggering click event, not premature removal of the resource.

Solution 3 - Javascript

this solution works for me in bot chrome and firefox for existing anchor element to download binary file

window.URL = window.URL || window.webkitURL;

var blob = new Blob([new Uint8Array(binStream)], {type: "octet/stream"});

var link = document.getElementById("link");
link.href = window.URL.createObjectURL(blob);

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJohnclView Question on Stackoverflow
Solution 1 - JavascriptMusaView Answer on Stackoverflow
Solution 2 - JavascriptTomek View Answer on Stackoverflow
Solution 3 - JavascriptAzadView Answer on Stackoverflow