Question

我正在尝试创建一个链接，该链接将允许用户下载扩展名为.svg的文件。我将SVG代码作为变量生成，并且是即时生成的，之后我想要HTML代码：下载

Answer 1

如果您使用“ download”属性创建虚假链接，则可以下载放在其“ href”中的所有内容，这是一个有效的示例，可从变量下载SVG：

function downloadSVG() {
  let svgData = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 105">
  <g fill="#97C024" stroke="#97C024" stroke-linejoin="round" stroke-linecap="round">
    <path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z" stroke-width="12"/>
    <path d="M32,5l5,10M64,5l-6,10 " stroke-width="2"/>
  </g>
  <path d="M22,35h51v10h-51zM22,33c0-31,51-31,51,0" fill="#97C024"/>
  <g fill="#FFF">
    <circle cx="36" cy="22" r="2"/>
    <circle cx="59" cy="22" r="2"/>
  </g>
</svg>`;

  /// Create a fake <a> element
  let fakeLink = document.createElement("a");
  /// Add image data as href
  fakeLink.setAttribute('href', 'data:image/svg+xml;base64,' + window.btoa(svgData));
  /// Add download attribute
  fakeLink.setAttribute('download', 'imageName.svg');
  /// Simulate click
  fakeLink.click();

}

用法：

<a href="javascript: downloadSVG();">download SVG</a>

演示-> https://jsbin.com/dusanisuwo/3/edit?html,js,output

SVG的下载链接（保留为变量）

1 个答案: