通过js下载一个包含“#”的divinnerHTML

Question

我正在尝试设置一个按钮来下载 div 内的 SVG 代码，但 SVG 包含哈希（#）并且无法按照我的方式在哈希后下载代码。我尝试创建一个js函数来添加标签，然后通过onclick函数下载它。function download() {    var a = document.body.appendChild(        document.createElement("a")    );    a.download = modedid.concat(".svg");    a.href = "data:text/html," + document.getElementById("svgWin").innerHTML;    a.click();}我希望获得我所有的 SVG 内容，但在其中第一个哈希之后的任何内容都不会包含在最终结果中。

Answer 1

几个星期以来，我一直将我的 svgs 导出为这样的 svg 文件，它对我来说效果很好。使用 blob 和 ObjectURLs 将 svg html 保存为 svg 文件

// html svg element

var svg = document.getElementById("svg"),

    // get the window URL element on any browser

    DOMURL = window.URL || window.webkitURL || window;

// encode the svg to a string

var data = (new XMLSerializer()).serializeToString(svg);

// convert serialized data to blob of type svg+xml

var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});

// get object url for the data blob

var url = DOMURL.createObjectURL(svgBlob);

/* download the data as a file */

// create a click event

var event = new MouseEvent('click', {

    view: window,

    bubbles: false,

    cancelable: true

});

// create an anchor for the download and the file using the image URI data

var a = document.createElement('a');

a.setAttribute('download', 'outputVectorGraphic.svg');

a.setAttribute('href', url);

a.setAttribute('target', '_blank');

// activate the event

a.dispatchEvent(event);

// revoke the url

DOMURL.revokeObjectURL(url);

<div id="svgWrapper">

  <svg id="svg" viewBox="0 0 20 20" width='50px' height='50px'>

    <rect x="0" y="0" width="20" height="20" fill="blue"/>

    <circle cx="10" cy="10" r=5px fill="red" />

  </svg>

</div>