有可能有一个按钮开始下载一个dom元素？ [英] Is it possible to have a button start a download of a dom element?

问题描述

我有一个svg在页面中生成，我不是从外部源。我想这个svg是可下载的打印。有没有办法（使用客户端Javascript）作为文本文件下载dom节点？

I have an svg that is generated in a page, I am not bringing it in from an outside source. I want this svg to be downloadable for printing. Is there a way (using client side Javascript) to download a dom node as a text file? I am limited to dojo and d3 libraries for this project.

推荐答案

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

Assuming the client is using a HTML5 web browser, this can be achieved pretty easily using <a>s download attribute. You will need to simulate a click with a MouseEvent on this element if you want the behaviour to be invoked by some other means, but the node does not have to be appended to the document. I've answered a similar question about this before, but here, set the <a>s href to the svg's file location unless it is created dynamically ‒ in that case you would encode the text describing it to create a data URI.

描述SVG的XML文本可以从其 SVGSVGElement 使用 XML >。

XML text describing a SVG can be obtained from it's SVGSVGElement node using XMLSerializer.

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

请注意，将取决于客户端的配置。

Please note that any "Save As" dialogue will depend on the client's configuration.

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

这篇关于有可能有一个按钮开始下载一个dom元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！