Javascript, programmatically trigger file download in firefox
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!
javascript firefox google-chrome dom
add a comment |
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!
javascript firefox google-chrome dom
add a comment |
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!
javascript firefox google-chrome dom
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!
javascript firefox google-chrome dom
javascript firefox google-chrome dom
asked Oct 1 '12 at 15:49
asutherlandasutherland
1,12921539
1,12921539
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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"');
I'm building the image I want the user to be able to download client side. Is there any way to let a user download a client side image that I have the data-uri for in FF? It looks like the download attribute has been in chrome for over a year so I'm not sure FF has any plans to support it ever.
– asutherland
Oct 1 '12 at 16:21
I added my answer to include an javascript only alternative. Is this something you can use?
– Bart
Oct 1 '12 at 17:12
Unfortunately location.href option means the file doesn't have the right mime type and I cannot set the default file name to anything reasonable, is there a way around that? Marking this as answer regardless as it was quite helpful. Thanks.
– asutherland
Oct 1 '12 at 22:19
I don't know if you read this, but the only solution (workaround / hack) I can think of to set the mime type and filename is to post the image back to the server and return it again with the right headers.
– Bart
Oct 2 '12 at 20:30
add a comment |
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/
The key is to attach it to the DOM for this approach to works under Firefox
– Beeno Tung
Sep 17 '18 at 23:20
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f12676649%2fjavascript-programmatically-trigger-file-download-in-firefox%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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"');
I'm building the image I want the user to be able to download client side. Is there any way to let a user download a client side image that I have the data-uri for in FF? It looks like the download attribute has been in chrome for over a year so I'm not sure FF has any plans to support it ever.
– asutherland
Oct 1 '12 at 16:21
I added my answer to include an javascript only alternative. Is this something you can use?
– Bart
Oct 1 '12 at 17:12
Unfortunately location.href option means the file doesn't have the right mime type and I cannot set the default file name to anything reasonable, is there a way around that? Marking this as answer regardless as it was quite helpful. Thanks.
– asutherland
Oct 1 '12 at 22:19
I don't know if you read this, but the only solution (workaround / hack) I can think of to set the mime type and filename is to post the image back to the server and return it again with the right headers.
– Bart
Oct 2 '12 at 20:30
add a comment |
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"');
I'm building the image I want the user to be able to download client side. Is there any way to let a user download a client side image that I have the data-uri for in FF? It looks like the download attribute has been in chrome for over a year so I'm not sure FF has any plans to support it ever.
– asutherland
Oct 1 '12 at 16:21
I added my answer to include an javascript only alternative. Is this something you can use?
– Bart
Oct 1 '12 at 17:12
Unfortunately location.href option means the file doesn't have the right mime type and I cannot set the default file name to anything reasonable, is there a way around that? Marking this as answer regardless as it was quite helpful. Thanks.
– asutherland
Oct 1 '12 at 22:19
I don't know if you read this, but the only solution (workaround / hack) I can think of to set the mime type and filename is to post the image back to the server and return it again with the right headers.
– Bart
Oct 2 '12 at 20:30
add a comment |
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"');
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"');
edited Mar 2 '18 at 8:31
answered Oct 1 '12 at 16:03
BartBart
557413
557413
I'm building the image I want the user to be able to download client side. Is there any way to let a user download a client side image that I have the data-uri for in FF? It looks like the download attribute has been in chrome for over a year so I'm not sure FF has any plans to support it ever.
– asutherland
Oct 1 '12 at 16:21
I added my answer to include an javascript only alternative. Is this something you can use?
– Bart
Oct 1 '12 at 17:12
Unfortunately location.href option means the file doesn't have the right mime type and I cannot set the default file name to anything reasonable, is there a way around that? Marking this as answer regardless as it was quite helpful. Thanks.
– asutherland
Oct 1 '12 at 22:19
I don't know if you read this, but the only solution (workaround / hack) I can think of to set the mime type and filename is to post the image back to the server and return it again with the right headers.
– Bart
Oct 2 '12 at 20:30
add a comment |
I'm building the image I want the user to be able to download client side. Is there any way to let a user download a client side image that I have the data-uri for in FF? It looks like the download attribute has been in chrome for over a year so I'm not sure FF has any plans to support it ever.
– asutherland
Oct 1 '12 at 16:21
I added my answer to include an javascript only alternative. Is this something you can use?
– Bart
Oct 1 '12 at 17:12
Unfortunately location.href option means the file doesn't have the right mime type and I cannot set the default file name to anything reasonable, is there a way around that? Marking this as answer regardless as it was quite helpful. Thanks.
– asutherland
Oct 1 '12 at 22:19
I don't know if you read this, but the only solution (workaround / hack) I can think of to set the mime type and filename is to post the image back to the server and return it again with the right headers.
– Bart
Oct 2 '12 at 20:30
I'm building the image I want the user to be able to download client side. Is there any way to let a user download a client side image that I have the data-uri for in FF? It looks like the download attribute has been in chrome for over a year so I'm not sure FF has any plans to support it ever.
– asutherland
Oct 1 '12 at 16:21
I'm building the image I want the user to be able to download client side. Is there any way to let a user download a client side image that I have the data-uri for in FF? It looks like the download attribute has been in chrome for over a year so I'm not sure FF has any plans to support it ever.
– asutherland
Oct 1 '12 at 16:21
I added my answer to include an javascript only alternative. Is this something you can use?
– Bart
Oct 1 '12 at 17:12
I added my answer to include an javascript only alternative. Is this something you can use?
– Bart
Oct 1 '12 at 17:12
Unfortunately location.href option means the file doesn't have the right mime type and I cannot set the default file name to anything reasonable, is there a way around that? Marking this as answer regardless as it was quite helpful. Thanks.
– asutherland
Oct 1 '12 at 22:19
Unfortunately location.href option means the file doesn't have the right mime type and I cannot set the default file name to anything reasonable, is there a way around that? Marking this as answer regardless as it was quite helpful. Thanks.
– asutherland
Oct 1 '12 at 22:19
I don't know if you read this, but the only solution (workaround / hack) I can think of to set the mime type and filename is to post the image back to the server and return it again with the right headers.
– Bart
Oct 2 '12 at 20:30
I don't know if you read this, but the only solution (workaround / hack) I can think of to set the mime type and filename is to post the image back to the server and return it again with the right headers.
– Bart
Oct 2 '12 at 20:30
add a comment |
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/
The key is to attach it to the DOM for this approach to works under Firefox
– Beeno Tung
Sep 17 '18 at 23:20
add a comment |
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/
The key is to attach it to the DOM for this approach to works under Firefox
– Beeno Tung
Sep 17 '18 at 23:20
add a comment |
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/
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/
answered Dec 3 '14 at 20:04
John MyczekJohn Myczek
10.1k32542
10.1k32542
The key is to attach it to the DOM for this approach to works under Firefox
– Beeno Tung
Sep 17 '18 at 23:20
add a comment |
The key is to attach it to the DOM for this approach to works under Firefox
– Beeno Tung
Sep 17 '18 at 23:20
The key is to attach it to the DOM for this approach to works under Firefox
– Beeno Tung
Sep 17 '18 at 23:20
The key is to attach it to the DOM for this approach to works under Firefox
– Beeno Tung
Sep 17 '18 at 23:20
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f12676649%2fjavascript-programmatically-trigger-file-download-in-firefox%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown