通过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 elementvar svg = document.getElementById("svg"),&nbsp; &nbsp; // get the window URL element on any browser&nbsp; &nbsp; DOMURL = window.URL || window.webkitURL || window;// encode the svg to a stringvar data = (new XMLSerializer()).serializeToString(svg);// convert serialized data to blob of type svg+xmlvar svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});// get object url for the data blobvar url = DOMURL.createObjectURL(svgBlob);/* download the data as a file */// create a click eventvar event = new MouseEvent('click', {&nbsp; &nbsp; view: window,&nbsp; &nbsp; bubbles: false,&nbsp; &nbsp; cancelable: true});// create an anchor for the download and the file using the image URI datavar a = document.createElement('a');a.setAttribute('download', 'outputVectorGraphic.svg');a.setAttribute('href', url);a.setAttribute('target', '_blank');// activate the eventa.dispatchEvent(event);// revoke the urlDOMURL.revokeObjectURL(url);<div id="svgWrapper">&nbsp; <svg id="svg" viewBox="0 0 20 20" width='50px' height='50px'>&nbsp; &nbsp; <rect x="0" y="0" width="20" height="20" fill="blue"/>&nbsp; &nbsp; <circle cx="10" cy="10" r=5px fill="red" />&nbsp; </svg></div>