1

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?

2

3 Answers 3

1
+50

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>

2
  • 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 - github.com/eligrey/FileSaver.js). Jun 10, 2016 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, 2016 at 19:30
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);
};
3
  • I uploaded it: jsfiddle.net/stared/f8sxa95f. Works in Chrome, does not in Firefox (TypeError: Not enough arguments to Event.initEvent.). Jun 10, 2016 at 17:32
  • @PiotrMigdal my bad, I was using the depreciated initEvent, try it now (see edited code)
    – Fraser
    Jun 11, 2016 at 8: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 6, 2021 at 6:37
0

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

2
  • After clicking I get: {"error": "Please use POST request"} with Chrome (but a correct download dialog for Firefox). Jun 10, 2016 at 17:27
  • Yes, it's jsfidlle framework. It work on a html file.-
    – Klaujesi
    Jun 10, 2016 at 19:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.