javascript - ボタンで dom 要素のダウンロードを開始することは可能ですか?

Question

ページで生成された svg がありますが、外部ソースから持ち込んでいません。このsvgを印刷用にダウンロードできるようにしたい。DOM ノードをテキスト ファイルとしてダウンロードする方法 (クライアント側の Javascript を使用) はありますか? このプロジェクトでは、dojo と d3 ライブラリに制限されています。

Answer 1

クライアントが HTML5 Web ブラウザーを使用していると仮定すると、これは<a>s download属性を使用して非常に簡単に実現できます。他の方法で動作を呼び出したい場合は、この要素のMouseEventでクリックをシミュレートする必要がありますが、ノードをドキュメントに追加する必要はありません。これについては以前に同様の質問に回答しましたが、ここでは、動的に作成されない限り、s hrefを svg のファイルの場所に設定します。その場合、それを説明するテキストをエンコードしてデータ URIを作成します。<a>

SVG を記述する XML テキストは、 XMLSerializer を使用してその SVGSVGElement ノードから取得できます。

var serializer = new XMLSerializer();
serializer.serializeToString(svg); // xml string for `svg` (your node)

[名前を付けて保存] ダイアログは、クライアントの構成によって異なることに注意してください。

// assuming var `svg` for your SVG node
var a = document.createElement('a'), xml, ev;
a.download = 'my_svg.svg'; // file name
xml = (new XMLSerializer()).serializeToString(svg); // convert node to xml string
a.href = 'data:application/octet-stream;base64,' + btoa(xml); // create data uri
// <a> constructed, simulate mouse click on it
ev = document.createEvent("MouseEvents");
ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
a.dispatchEvent(ev);