Hi all,

I've been wanting to get an export function to work on my site, which almost works perfectly, it just does not download automatically.

Currently it generates this: <a target="_blank" download="MediumRandomNewick_treemap_outer.png" href="blob:http://localhost:8080/c02ebb93-19b9-43fa-872d-b32fc02dc56f">Export</a>

But this is not clickable and also does not force the download, can anyone tell me how I would go about force downloading? Preferably with JavaScript.

It seems to work if the URL in the HREF value is valid (even if the file doesn't exist). I don't know anything about blob:http, so I can't tell what's going on there.

The TARGET attribute is not necessary for this, neither is javascript.

Removing the target attribute made it clickable, I got the force download to work but sadly it is the SVG element with the CSS in-line (which is partially what I wanted).

If I can get the SVG element out of the link I can easily download it as a png, any idea how I could go about doing that? can I use the link in the <a>?

Not sure I understood any of this post.


You mean you want to download a SVG? Or is the download link inside a SVG element?

I guess the blob URL leads to an SVG image.

Seems the DOWNLOAD attribute at least works with data URIs like this:


(the above should generate an image file depicting a red dot).

Duh. I didn't notice the 'data:image/png;base64' bit. Well, then I'm stumped too.

Yeah the link downloads an SVG element as a png (as in, it is a png file, but opening it in a text editor just shows a standard html SVG element).

Sorry if I don't explain things well, not really good at explaining.

Assuming the blob URI does reference a SVG correctly (I can't tell), maybe you could convert it to a base64 data URI? Seems there are javascript functions for that nowadays.

... because it was never there. I thought you quoted from the OP's post.

I googled some and if I understand it right, the blob protocol can't be used like this at all, hardcoded. It can only be used programmatically. If that is true only the URL in the download attribute is used.

An image can't be an SVG and a PNG at the same time. Does it open normally in an image editor? I know for example Irfan View opens images with the wrong extension but warns about it an offers to rename them properly. Most standard image editors or viewers don't handle SVG at all.

No it's from Wikipedia.


Note that the attribute value only suggests a filename, it's not a actual URL.


That doesn't affect how the browser handles the download though, you can name the download file "foo.bar" and it will still download. But if you want the downloaded file to be usable (once downloaded), you must of course use a working file extension (at least in Windows).

I see. I confess I haven't looked into the download attribute, just noted it exists.




Well, the OP said he downloaded it and opened it in a text editor.

Anyway, the blob thing must somehow work anyway, but what does it do?

I think we need more information about what the OP is doing.

- Where does the BLOB come from? If it's from a database, maybe it's simplest to convert it to a base64 data URI on the server side, and then use that for the download.

- How and where is a SVG generated, and where is it used? The OP haven't shown any code example of that.

I read that a blob URL references an object that is in the browser's memory and not a physical file. Beats me how it, in this case, got into the memory to start with.