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

Question

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

Answer 1

假设客户端使用 HTML5 Web 浏览器，则可以使用 <a> 轻松实现此目的。 download attribute 。您需要simulate a click与 MouseEvent如果您希望通过其他方式调用该行为，但不必将该节点附加到文档中，则可以在此元素上添加该节点。 I've answered a similar question about this before ，但在这里设置 <a> s href 到 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);