Question

此codepen使用pur javacript下载 SVG 作为文件。我想用var text = ""; var origRootDiv = null; function createView() { var rootDiv = document.createElement("div"); // If moved under, issue goes away if (text.length > 0 && text.length % 2 == 0) { var messageDiv = document.createElement("div"); messageDiv.innerHTML = "Even char count!"; rootDiv.appendChild(messageDiv); } // End if var input = document.createElement("input"); input.id = "this-should-help-right"; input.value = text; rootDiv.appendChild(input); input.addEventListener("input", function(e) { text = e.target.value; var newRootDiv = createView(); morphdom(origRootDiv, newRootDiv); }); return rootDiv; } origRootDiv = createView(); document.body.appendChild(origRootDiv);来做。我有一个svg，其中一个属性Vue.js绑定到vue实例数据，并通过滑块动态控制。我希望能够通过单击按钮随时将当前的svg元素下载为svg文件。

模板，

radius

我如何编写使用vue做到这一点的方法？

<svg id="dynamicIllustration" version="1.1" baseProfile="full" width="300" height="200">
<rect width="100%" height="100%" fill="lightblue" />
<circle cx="150" cy="100" :r="radius" fill="lightgreen" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="gray">SVG</text>
</svg>
<button class="btn btn-primary btn-sm" @click="downloadSVG()">Download SVG</button>
<input style="display: inline-block;" type="range" min="0" max="100" width="100" class="form-control-range sliderSize" v-model="radius" id="formControlRange">

注释掉一行，因为click事件已经由vue处理。结果是我没有downloadSVG(){ console.log("running downloadSVG()"); // document.querySelector(".link-download").addEventListener("click", (evt) => { const svgContent = document.getElementById("dynamicIllustration").outerHTML, blob = new Blob([svgContent], { type: "image/svg+xml" }), url = window.URL.createObjectURL(blob), link = evt.target; link.target = "_blank"; link.download = "Illustration.svg"; link.href = url; // }); },，这就是我尝试运行该错误时的提示。

谢谢

Answer 1

Vue会将事件自动传递给您的点击处理程序

  <a href="#" @click="downloadSVG" class="link-download btn btn-primary btn-sm">Download displayed SVG</a>

您只需要在这样的方法中接收它：

    downloadSVG(evt){....

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: {
    radius: 10
  },
  methods: {
    downloadSVG(evt) {

      // document.querySelector(".link-download").addEventListener("click", (evt) => {
      const svgContent = document.getElementById("dynamicIllustration").outerHTML,
        blob = new Blob([svgContent], {
          type: "image/svg+xml"
        }),
        url = window.URL.createObjectURL(blob),
        link = evt.target;

      link.target = "_blank";
      link.download = "Illustration1.svg";
      link.href = url;
      // });

    }

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />



<div id="app" class="container">
  <svg id="dynamicIllustration" version="1.1" baseProfile="full" width="300" height="200">
<rect width="100%" height="100%" fill="lightblue" />
<circle cx="150" cy="100" :r="radius" fill="lightgreen" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="gray">SVG</text>
</svg>
  <a href="#" @click="downloadSVG($event)" class="link-download btn btn-primary btn-sm">Download displayed SVG</a>

  <input style="display: inline-block;" type="range" min="0" max="100" width="100" class="form-control-range sliderSize" v-model="radius" id="formControlRange">

</div>

Vue2导出SVG元素以文件形式下载

1 个答案: