Clever Geek Handbook

HTML frontend SVG export download with JavaScript

I am using highcharts to create SVG charts. So, the diagram is shown in the interface with an svg

HTML tag .

Now I want to export this graph to SVG file.

My effort

Since SVG is generated exclusively in the frontend, the backend doesn't know anything about this. And if I want to initialize the download with some content, what I know about it is to make an HTTP response with the content.

So I can just grab the SVG content as a string, then load it with an HTTP request, and then respond to the content as it is.

I want better

I think there is no logical need to pass this way, because the interface knows everything we want.

I asked for help: is it possible to initialize the download in the frontend?

+3


source to share


1 answer


You can directly generate download links using the base64 encoded encoded version of the SVG data.

You just need to add data:application/octet-stream;base64,

before the base64 encoded data.

Here's a simple fiddle to demonstrate;



http://jsfiddle.net/xkbhf7mo/

EDIT: You can also provide the filename with the attribute download

in the anchor tag to make things look nicer.

<a download="your_file_name" href='...'>Download</a>

+4


source






More articles:


All Articles