Link to generated download file from SVG

Question

I want to create a custom download (JavaScript-generated JSON file) from an SVG element (in my application interface is in SVG). However, while I can do it for plain HTML (vide Force download of 'data:text/plain' URL) it does not work for SVG.

An example (https://jsfiddle.net/stared/qzn7Ldme/):

HTML:

<a id="link_html" download="file.txt">download file (from HTML)</a>
<br/>
<svg height="100" width="300">
  <a id="link_svg" download="file.txt">
    <text x="0" y="50">download file (from SVG)</text>
  </a>
</svg>

JS:

var conent = "This is the file content.";
var header = "data:text/plain;charset=utf-8,"
var payload = header + encodeURIComponent(conent);

// works
d3.select("#link_html").on("click", function () {
    this.href = payload;
});

// does not work as intended
d3.select("#link_svg").on("click", function () {
  //// line below does nothing:
  // this["xlink:href"] = payload;

  // opens file in the same window, not as a downloaded file!
  d3.select("#link_svg").attr("xlink:href", payload);
});

If it matters, I use D3.js (3.x).

Is there a know solution / fix?

As I see now see using `Blob` and `createObjectURL` may be a solution - vide [Blob createObjectURL download not working in Firefox (but works when debugging)](http://stackoverflow.com/questions/30694453/blob-createobjecturl-download-not-working-in-firefox-but-works-when-debugging). — Piotr Migdal, Jun 07 '16 at 18:25
SVG `` elements don't support download attributes. You could contact w3c and ask for it to be added to the next version of the SVG specification via https://lists.w3.org/Archives/Public/www-svg/ — Robert Longson, Jun 10 '16 at 14:23

Fraser · Answer 1 · 2016-06-11T09:03:30.233

1

You could simply use a utility function to create a link that behaves as you require. e.g.

SVG

<svg height="100" width="300">
  <a id="link_svg" download="file.txt">
    <text x="0" y="50">download file (from SVG)</text>
  </a>
</svg>

JS

var content = "This is the file content.";

d3.select("#link_svg").on("click", function () {
  downloadFile("file.txt", content);
});

var downloadFile = function(filename, content) {
  var blob = new Blob([content]);
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var a = document.createElement("a");
  a.download = filename;
  a.href = URL.createObjectURL(blob);
  a.dispatchEvent(event);
};

edited Jun 11 '16 at 09:03

answered Jun 10 '16 at 15:22

Fraser

15,275
8
53
104

I uploaded it: https://jsfiddle.net/stared/f8sxa95f/. Works in Chrome, does not in Firefox (`TypeError: Not enough arguments to Event.initEvent.`). – Piotr Migdal Jun 10 '16 at 17:32
@PiotrMigdal my bad, I was using the depreciated initEvent, try it now (see edited code) – Fraser Jun 11 '16 at 08:53
1

This solution worked great for me. I just added a.remove() to the end of downloadFile() to delete the link once its used. For my use case the data (content) could change at any time. – alQemist Dec 06 '21 at 06:37

score 1 · Accepted Answer · edited Jun 13 '16 at 15:43

1

I copied @Fraser's answer but used FileSaver.js makes this a easy task:

var content = "This is the file content.";
var blob = new Blob([content]);

d3.select("#link_svg").on("click", function () {
  saveAs(blob, "file.txt");
});

<script src="https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.min.js"></script>
<script src="https://d3js.org/d3.v3.js"></script>

<svg height="100" width="300">
  <a id="link_svg">
    <text x="0" y="50">download file (from SVG)</text>
  </a>
</svg>

edited Jun 13 '16 at 15:43

Fraser

15,275
8
53
104

answered Jun 10 '16 at 16:02

Endless

34,080
13
108
131

Works flawlessly. In any case - does `header` matter? With `{type: 'text/plain;charset=utf-8'}` it also works fine (and it is in the examples of this library - https://github.com/eligrey/FileSaver.js/). – Piotr Migdal Jun 10 '16 at 18:06
The type shouldn't matter so much since the type is only used to help the browser understand the type of file it receives – Endless Jun 10 '16 at 19:30

score 0 · Answer 3 · edited May 23 '17 at 12:15

You could change data by:

data:application/octet-stream

to force download. But download tag it's for HTML not for SVG markup. So you can't assign filename.ext before download.

<a id="link_html" download="file.txt">download file (from HTML)</a>
<br/>
<svg height="100" width="300">
  <a id="link_svg" download="file.txt" xlink:href="">
    <text x="0" y="50">download file (from SVG)</text>
  </a>
</svg>

<script>
        var conent = "This is the file content.";
        var header = 'data:application/octet-stream;charset=utf-8,'
        var payload = header + encodeURIComponent(conent);

        // works
        d3.select("#link_html").on("click", function () {
            this.href = payload;
        });

        d3.select("#link_svg").attr("xlink:href", payload)
</script>

need an utility function to do that. Take a look here.-

After clicking I get: `{"error": "Please use POST request"}` with Chrome (but a correct download dialog for Firefox). — Piotr Migdal, Jun 10 '16 at 17:27

Link to generated download file from SVG

3 Answers3