Printable Version of Topic

Posted by: Urgaan May 16 2018, 06:04 AM

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.

Posted by: Christian J May 16 2018, 08:53 AM

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.

Posted by: Urgaan May 17 2018, 03:47 AM

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>?

Posted by: Christian J May 17 2018, 07:14 AM

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?

Posted by: pandy May 17 2018, 03:28 PM

I guess the blob URL leads to an SVG image.

Posted by: Christian J May 17 2018, 04:34 PM

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

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

Posted by: pandy May 18 2018, 12:53 AM

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

Posted by: Urgaan May 18 2018, 01:41 AM

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.

Posted by: Christian J May 18 2018, 05:08 AM

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.

Posted by: pandy May 18 2018, 08:04 AM

... 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.

Posted by: Christian J May 18 2018, 08:21 AM

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).

Posted by: pandy May 18 2018, 03:00 PM

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?

Posted by: Christian J May 19 2018, 04:07 PM

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.

Posted by: pandy May 20 2018, 09:10 AM

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.