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

Is it possible to have a button start a download of a dom element?

本文关键字：下载 dom 元素 开始 按钮 是否      更新时间：2023-09-26

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

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

描述 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);
相关文章：