CODEWITHSUNDEEP
javascripthtmlhttpsvg
Alfred Huang
Alfred Huang

Reputation: 18255

HTML frontend SVG export download with JavaScript

I'm using highcharts to create SVG charts. So, the chart is shown in the frontend, with an svgHTML tag.

Now I want to export that chart as an SVG file.

My effort

Since the SVG is generated purely in the frontend, the backend knows nothing about it. And if I want to initialize a download with some content, what I know about it is to make an HTTP response with the content.

So I can simply grab the SVG content as a string, then upload it with an HTTP request, then response the content as it was.

I want it better

I think there is logically no need to transfer by such a way, because the frontend knows everything we want.

I turned for your help: Is it possible to initialize a download in the frontend?

Upvotes: 3

Views: 1313

Answers (1)

JuniorDev
JuniorDev

Reputation: 1200

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

You just need to add data:application/octet-stream;base64, in front of the base64 encoded data.

Here is a simple fiddle to demonstrate;

http://jsfiddle.net/xkbhf7mo/

EDIT: You can also specify a filename with download attribute in anchor tag to make things more pretty.

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

Upvotes: 5

Related Questions