力指向グラフを表すsvgがあります。リンクをクリックするだけでこのsvgをダウンロードし、svgファイルとして保存したいと思います。他の同様の投稿からいくつかの解決策を試した後、ボタンのupponクリックと呼ばれるこの関数を思いつきました：
<a id="svglink" href="" @click="saveSvg2" download="testSvg.svg" >DOWNLOAD</a>
saveSvg2(){
// https://askcodez.com/comment-puis-je-enregistrer-exporter-un-fichier-svg-apres-la-creation-dun-svg-avec-d3-js-ie-safari-et-chrome.html
//get svg element.
var svg = document.getElementById("graph").child; // this.exportableMap
//get svg source.
var serializer = new XMLSerializer();
var source = serializer.serializeToString(svg);
//add name spaces.
if(!source.match(/^<svg[^>]+xmlns="http:\/\/www\.w3\.org\/2000\/svg"/)){
source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
}
if(!source.match(/^<svg[^>]+"http:\/\/www\.w3\.org\/1999\/xlink"/)){
source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
}
//add xml declaration
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
//convert svg source to URI data scheme.
var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
//set url value to a element's href attribute.
document.getElementById("svglink").href = url;
},
ボタンを使用してボタンを右クリックし、そこから保存すると機能しますが、左クリックで事前に定義されたファイル名でダウンロードしたいのですが。理想的にはリンクを左クリックしますが、実装が簡単な場合はボタンも機能します。これを実現するにはどうすればよいですか？
これをWebサーバーから実行していることを確認してください。私はblobスキームを使用していますが、データスキームでも同じだと思います。以下の例はSTスニペットでは実行できないため、codepenの例を作成しました。初めてリンクをクリックした後でリンクを調べると、hrefに値があることがわかりますblob:https://cdpn.io/[some id]。URLは、機能するはずのサインです。ページがサーバーから実行されない場合、hrefの値はのようになりますblob:null/[some id]。
コードの一部をスキップしたことは知っていますが、これはBlobを使用してSVG文字列などのマークアップをデータURLに変換する方法の最小限の例です。
document.links.svglink.addEventListener('click', e => {
let svg = document.querySelector('svg').outerHTML;
let blob = new Blob([svg], {type : 'image/svg+xml'});
e.target.href = URL.createObjectURL(blob);
});
<svg viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" fill="orange" />
</svg>
<a name="svglink" href="javascript:void(0)" download="hello.svg">DOWNLOAD</a>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加