是否有可能有一个按钮开始下载一个DOM元素？

Question

我有一个在页面中生成的svg，我没有从外部源中引入它。我希望这个svg可以下载打印。有没有一种方法（使用客户端JavaScript）下载一个DOM节点作为文本文件？我仅限于此项目的dojo和d3库。

Answer 1

假设客户端正在使用HTML5网页浏览器，可以使用<a> s download attribute轻松实现此功能。如果您希望通过其他方式调用该行为，则需要在该元素上使用simulate a click并使用MouseEvent，但该节点不必附加到文档中。 I've answered a similar question about this before，但在这里，请将<a>设置为svg的文件位置，除非它是动态创建的 - 在这种情况下，您将编码描述它的文本以创建data URI。

描述SVG的XML文本可以从SVGSVGElement节点使用XMLSerializer获得。

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