Этот codepen загружает SVG как файл, используя pur javacript. Я хочу сделать это с Vue.js
У меня есть svg, один атрибут которого, radius
, связан с данными экземпляров vue и динамически управляется с помощью ползунка. Я хотел бы иметь возможность загружать текущий элемент SVG в виде файла SVG в любое время, нажав кнопку.
Шаблон,
<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">
Как мне написать метод, чтобы сделать это с помощью 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;
// });
},
Одна строка закомментирована, потому что событие click уже обработано vue. В результате у меня нет evt
и того, что говорит мне ошибка, когда я пытаюсь запустить ее.
Спасибо,
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>