Tengo un svg que representa un gráfico de fuerza dirigida. Deseo descargar este svg haciendo clic en un enlace y guardarlo como un archivo svg. Después de probar varias soluciones de otras publicaciones similares, se me ocurrió esta función que se llamará al hacer clic en el botón:
<a id="svglink" href="" @click="saveSvg2" download="testSvg.svg" >DOWNLOAD</a> saveSvg2(){ // https://askcodez.com/comment-puis-je-enregistrer-exporter-un-fichier-svg-apres-la-creation-dun-svg-avec-d3-js-ie-safari-et-chrome.html //get svg element. var svg = document.getElementById("graph").child; // this.exportableMap //get svg source. var serializer = new XMLSerializer(); var source = serializer.serializeToString(svg); //add name spaces. if(!source.match(/^<svg[^>]+xmlns="http:\/\/www\.w3\.org\/2000\/svg"/)){ source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"'); } if(!source.match(/^<svg[^>]+"http:\/\/www\.w3\.org\/1999\/xlink"/)){ source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"'); } //add xml declaration source = '<?xml version="1.0" standalone="no"?>\r\n' + source; //convert svg source to URI data scheme. var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source); //set url value to a element's href attribute. document.getElementById("svglink").href = url; },Funciona si uso un botón y hago clic con el botón derecho en el botón y lo guardo desde allí, pero quiero que se descargue con un clic izquierdo y con un nombre de archivo predefinido. Lo ideal es hacer clic con el botón izquierdo en un enlace, pero un botón también puede funcionar si es más fácil de implementar. ¿Cómo puedo lograr esto?
Asegúrese de que está ejecutando esto desde un servidor web. Uso el esquema de blob pero supongo que es lo mismo para el esquema de datos. El siguiente ejemplo no puede ejecutarse en un fragmento ST, por lo tanto, hice un ejemplo de codepen . Cuando inspecciona el enlace después de hacer clic en él por primera vez, puede ver que href tiene el valor blob:https://cdpn.io/[some id] . La URL es una señal de que debería funcionar. Si la página no se ejecuta desde un servidor, el valor de href será algo como blob:null/[some id] .
Sé que omití parte de su código, pero este es un ejemplo mínimo de cómo puede usar Blob para convertir marcas como la cadena SVG en una URL de datos.
document.links.svglink.addEventListener('click', e => { let svg = document.querySelector('svg').outerHTML; let blob = new Blob([svg], {type : 'image/svg+xml'}); e.target.href = URL.createObjectURL(blob); }); <svg viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"> <rect width="100" height="100" fill="orange" /> </svg> <a name="svglink" href="javascript:void(0)" download="hello.svg">DOWNLOAD</a>