When using document.location.href to save client-side data, how can I suggest a filename to the browser?

Question

I'm trying to export an HTML5 canvas as a PNG file, so that it is stored on the user's computer.

The following snippet saves the image correctly.

document.location.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

However using Chrome on Mac OS X, it always is saved as "download". In Safari it is called "Unknown". Firefox gives it a gobbledygook name.

Can I suggest to the browser a name to use, such as "exportedImage.png"?

possible duplicate of [Is there any way to specify a suggested filename when using data: URI?](http://stackoverflow.com/questions/283956/is-there-any-way-to-specify-a-suggested-filename-when-using-data-uri) — Pointy, May 21 '11 at 15:50
I once came across a tip of sending the `data:` to a server, which in turn sends the data back with some appropriate headers. I've not yet tried it though, but perhaps it's worth a shot. — pimvdb, May 21 '11 at 22:26
@pimvdb, document.location is non-standard quirk from dark 199x. — Premature Optimization, May 22 '11 at 08:02

score 4 · Accepted Answer · edited May 23 '17 at 11:54

4

This is apparently a topic of discussion in browser bug lists and a W3C mailing list. I can't find any evidence that any browser supports the idea of a filename parameter in a "data:" URL, though it is clear that the spec supports the idea of parameters in general.

Also see this older SO question, which is essentially the same as this one.

edited May 23 '17 at 11:54

Community

1
1

answered May 21 '11 at 15:48

Pointy

405,095
59
585
614

When using document.location.href to save client-side data, how can I suggest a filename to the browser?

1 Answers1