Vue2 Export SVG element to download as a file

Question

This codepen downloads an SVG as a file using pur javacript. I want to do this with Vue.js. I have an svg, one attribute of which, the radius, is bound to the vue instances data and is dynamically controlled via a slider. I would like to be able to download the current svg element as an svg file at any time by clicking a button.

The template,

<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">

How do i write the method to do this with 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;
// });

      },

One line is commented out because the click event is already handled by vue. As a result I don't have an evt and that's what the error tells me when I try to run it.

Thanks,

Answer 1

Vue will pass the event automatically to your click handler

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

You just need to receive it in your method like this :

    downloadSVG(evt){....

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: {
    radius: 10
  },
  methods: {
    downloadSVG(evt) {


      const svgContent = document.getElementById("dynamicIllustration").outerHTML,
        blob = new Blob([svgContent], {
          type: "image/svg+xml"
        })
      let url = window.URL.createObjectURL(blob);
      let link = evt.target;

      link.target = "_blank";
      link.download = "Illustration1.svg";
      link.href = url;
      let body = document.querySelector('body')
      body.appendChild(link)
      link.click()
      console.log(link)

    }

  }

});

<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" 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>