Help - Search - Members - Calendar
Full Version: Download png from link
HTMLHelp Forums > Web Authoring > Web Site Functionality
Urgaan
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.
Christian J
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.
Urgaan
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>?
Christian J
Not sure I understood any of this post. unsure.gif

QUOTE(Urgaan @ May 17 2018, 10:47 AM) *

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

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

pandy
I guess the blob URL leads to an SVG image. unsure.gif
Christian J
Seems the DOWNLOAD attribute at least works with data URIs like this:

CODE
<a download="test.png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">Example</a>

(the above should generate an image file depicting a red dot).
pandy
Duh. I didn't notice the 'data:image/png;base64' bit. Well, then I'm stumped too.
Urgaan
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.
Christian J
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.
pandy
QUOTE(pandy @ May 18 2018, 07:53 AM) *

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

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

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.
Christian J
QUOTE(pandy @ May 18 2018, 03:04 PM) *

I thought you quoted from the OP's post. blush.gif

No it's from Wikipedia. cool.gif

QUOTE
only the URL in the download attribute is used.

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

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

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


pandy
QUOTE(Christian J @ May 18 2018, 03:21 PM) *

QUOTE(pandy @ May 18 2018, 03:04 PM) *

only the URL in the download attribute is used.

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


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


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

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


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?
Christian J
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.
pandy
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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.