单击 link 下载 svg 文件

Question

我有一个表示力导向图的 svg。我希望通过单击 link 下载此 svg 并将其另存为 svg 文件。在尝试了其他类似帖子的几种解决方案之后，我想出了这个函数，点击按钮就会调用它：

<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;
    
    },

如果我使用一个按钮并右键单击该按钮并从那里保存它，它会起作用，但我希望它在左键单击时使用预定义的文件名进行下载。理想情况下左键单击 link，但如果更容易实现，按钮也可以使用我怎样才能做到这一点？

Answer 1

确保您是从网络服务器运行下载的。我使用 blob 方案，但我想数据方案也是一样的。下面的示例不能在 ST 片段中运行，因此我做了一个 codepen example。当您在第一次单击 link 后检查它时，您可以看到 href 的值为 blob:https://cdpn.io/[some id]。 URL 是它应该工作的标志。如果页面不是运行来自服务器，则 href 的值将类似于 blob:null/[some id].

我知道我跳过了您的一些代码，但这是一个最小的示例，说明您如何使用 Blob 将 SVG 字符串等标记转换为数据 URL.

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>

单击 link 下载 svg 文件

Download a svg file by clicking a link

javascript

svg