Link zur generierten Download-Datei von SVG

Question

Ich möchte einen benutzerdefinierten Download (JavaScript-generierte JSON-Datei) von einem SVG-Element erstellen (in my application Schnittstelle ist in SVG). Während ich es für einfaches HTML (vide Force download of 'data:text/plain' URL) tun kann, funktioniert es nicht für SVG.

Ein Beispiel (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); 
}); 

Wenn es darauf ankommt, verwende ich D3.js (3.x).

Gibt es eine bekannte Lösung?

Answer 1

I @ Fraser Antwort kopiert, aber verwendet FileSaver.js macht dies eine einfache Aufgabe:

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>

Answer 2

könnten Sie Daten ändern:

data:application/octet-stream 

Download zu erzwingen. Aber download Tag ist es für HTML nicht für SVG Markup. Sie können filename.ext also nicht vor dem Download zuweisen.

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

brauchen eine Dienstprogrammfunktion, das zu tun. Werfen Sie einen Blick here .-

Answer 3

Sie können einfach eine Dienstprogrammfunktion verwenden, um einen Link zu erstellen, der sich wie gewünscht verhält. z.B.

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); 
};