svg to png download in vue
<template>
<div>
<button @click="downloadPng">change</button>
<svg ref="svg" t="1679989825829" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="434692" width="200" height="200">
<path d="M512 512m-332.8 0a332.8 332.8 0 1 0 665.6 0 332.8 332.8 0 1 0-665.6 0Z" fill="#FC9709" p-id="434693">
</path>
<path
d="M583.9872 173.312c-15.4112-3.328-25.2928-18.688-21.9648-34.0992l20.4288-94.3616c3.328-15.4112 18.688-25.2928 34.0992-21.9648 15.4112 3.328 25.2928 18.688 21.9648 34.0992l-20.4288 94.3616c-3.328 15.4112-18.688 25.2928-34.0992 21.9648zM371.1488 195.6864c-14.4384 6.3488-31.4368-0.256-37.7856-14.6432l-38.912-88.3712c-6.3488-14.4384 0.256-31.4368 14.6432-37.7856 14.4384-6.3488 31.4368 0.256 37.7856 14.6432l38.9632 88.3712c6.3488 14.4384-0.256 31.4368-14.6944 37.7856zM212.1216 338.8928c-7.936 13.6192-25.5488 18.2784-39.2192 10.3424l-83.456-48.5888c-13.6192-7.936-18.2784-25.5488-10.3424-39.2192 7.936-13.6192 25.5488-18.2784 39.2192-10.3424l83.456 48.5888c13.6192 7.936 18.2784 25.5488 10.3424 39.2192zM167.6288 548.1984c1.5872 15.6672-9.9328 29.7984-25.6512 31.3856l-96.0512 9.728c-15.6672 1.5872-29.7984-9.9328-31.3856-25.6512-1.5872-15.6672 9.9328-29.7984 25.6512-31.3856l96.0512-9.728c15.6672-1.5872 29.7984 9.984 31.3856 25.6512zM254.6688 743.68c10.496 11.776 9.472 29.952-2.2528 40.4992l-71.9872 64.3584c-11.776 10.496-29.952 9.472-40.4992-2.2528-10.496-11.776-9.472-29.952 2.2528-40.4992l71.9872-64.3584c11.776-10.496 30.0032-9.472 40.4992 2.2528zM440.0128 850.688c15.4112 3.328 25.2928 18.688 21.9648 34.0992l-20.4288 94.3616c-3.328 15.4112-18.688 25.2928-34.0992 21.9648-15.4112-3.328-25.2928-18.688-21.9648-34.0992l20.4288-94.3616c3.328-15.4112 18.688-25.2928 34.0992-21.9648zM652.8512 828.3136c14.4384-6.3488 31.4368 0.256 37.7856 14.6432l38.9632 88.3712c6.3488 14.4384-0.256 31.4368-14.6432 37.7856-14.4384 6.3488-31.4368-0.256-37.7856-14.6432l-38.9632-88.3712c-6.4-14.4384 0.2048-31.4368 14.6432-37.7856zM811.8784 685.1072c7.936-13.6192 25.5488-18.2784 39.2192-10.3424l83.456 48.5888c13.6192 7.936 18.2784 25.5488 10.3424 39.2192-7.936 13.6192-25.5488 18.2784-39.2192 10.3424l-83.456-48.5888c-13.6192-7.936-18.2784-25.5488-10.3424-39.2192zM856.3712 475.8016c-1.5872-15.6672 9.9328-29.7984 25.6512-31.3856l96.0512-9.728c15.6672-1.5872 29.7984 9.9328 31.3856 25.6512 1.5872 15.6672-9.9328 29.7984-25.6512 31.3856l-96.0512 9.728c-15.6672 1.5872-29.7984-9.984-31.3856-25.6512zM769.3312 280.32c-10.496-11.776-9.472-29.952 2.2528-40.4992l71.9872-64.3584c11.776-10.496 29.952-9.472 40.4992 2.2528 10.496 11.776 9.472 29.952-2.2528 40.4992l-71.9872 64.3584c-11.776 10.496-30.0032 9.472-40.4992-2.2528z"
fill="#FC9709" p-id="434694"></path>
</svg>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
},
components: {
},
methods: {
downloadPng() {
const svg = this.$refs.svg;
const canvas = document.createElement('canvas');
canvas.width = svg.clientWidth;
canvas.height = svg.clientHeight;
const ctx = canvas.getContext('2d');
const data = new XMLSerializer().serializeToString(svg);
const DOMURL = window.URL || window.webkitURL || window;
const img = new Image();
const svgBlob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
const url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
const a = document.createElement('a');
a.href = canvas.toDataURL('image/png');
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
img.src = url;
},
},
mounted() {
},
}
</script>
<style scoped>
</style>
May report an error
not allowed to navigate top frame to data
The chrome browser prevents opening the address of the Data URI for security reasons, but the download does not have to open a new web page, add the download attribute to the a tag
// 添加
a.download = 'diagram.png';