Javascript, programmatically trigger file download in firefox

Question

I have uri data in memory that I would like to load.

This fiddle works in chrome but not in FF: http://jsfiddle.net/6W2TY/

When you hit the run, it will load a tiny image in chrome and will do nothing in FF. Can someone help me understand why it does not work in FF and what do I need to do to make it work?

Thanks!

Answer 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 (IE support is not supported).

Alternative: Using location.href

Another way to force download is to redirect the user to the image as follows:

// 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 short version

 location.href = "data:application/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg==" 

Alternative: server side

Alternatively, if you are processing an image server, you can force download it by setting the content header.

PHP example

 header('Content-Disposition: attachment; filename="image.png"'); 

Answer 2

I understand that this is an old post, but I ran into it when I had a similar problem with uploading files to FF. It may not have worked in FF at the time of writing the question, but now this is happening.

 a = document.createElement('a'); document.body.appendChild(a); a.download = name; a.href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg=="; a.click(); ; base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh // 0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I + 5qmAAAAABJRU5ErkJggg =="; a = document.createElement('a'); document.body.appendChild(a); a.download = name; a.href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg=="; a.click(); 

Changes to the original script:

• Add a call to document.body.appendChild(a);
• Change triggerEvent() to a.click()

Here is the updated fiddle: http://jsfiddle.net/70f91ao7/6/