javascript - 是否可以让按钮开始下载 dom 元素？

Question

我有一个在页面中生成的 svg，我不是从外部来源引入的。我希望这个 svg 可以下载打印。有没有办法（使用客户端 Javascript）将 dom 节点下载为文本文件？我仅限于这个项目的 dojo 和 d3 库。

Answer 1

假设客户端使用的是 HTML5 网络浏览器，这可以很容易地使用<a>s下载属性来实现。如果您希望通过其他方式调用该行为，则需要在此元素上使用MouseEvent模拟单击​​，但不必将节点附加到文档中。我之前已经回答过一个类似的问题，但是在这里，将s href设置为 svg 的文件位置，除非它是动态创建的——在这种情况下，您将对描述它的文本进行编码以创建一个数据 URI。<a>

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

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