Javascript, programmatically trigger file download in firefox
Solution 1
You are using the new (html5) download attribute. As far as I know this is only supported in Chrome and not (yet) in Firefox.
Update 3-2018
This feature is now supported in almost all major browsers (No IE support).
Alternative: Using location.href
Another way to force a download is to redirect the user to the image like this:
// generate the image
var img = ""
// then call a function maybe onClick or something
downloadImage(img);
function downloadImage(data) {
location.href = "data:application/octet-stream;base64," + data;
}
Or the short version
location.href = "data:application/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg=="
Alternative: Server Side
As an alternative, if you are processing the image serverside you can force a download by setting the content-disposition header.
PHP Example
header('Content-Disposition: attachment; filename="image.png"');
Solution 2
I realize this is an old post, but I came across it when I had a similar problem downloading files in FF. This may not have worked in FF at the time the question was written, but it does now.
a = document.createElement('a');
document.body.appendChild(a);
a.download = name;
a.href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg==";
a.click();
Changes from the original fiddle:
- Add call to
document.body.appendChild(a);
- Change
triggerEvent()
toa.click()
Here is an updated fiddle: http://jsfiddle.net/70f91ao7/6/
asutherland
Updated on March 02, 2020Comments
-
asutherland about 4 years
I have a data uri in memory that I would like the user to download.
This fiddle works in chrome but not FF: http://jsfiddle.net/6W2TY/
When you click run it will download the tiny image in chrome and do nothing in FF. Can anyone help me understand why it doesn't work in FF and what I need to do to make it work?
Thanks!