vue中svg转png下载
<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>
可能报错
not allowed to navigate top frame to data
chrome浏览器阻止打开Data URI的地址是为了安全考虑，但是下载不是非得打开新的网页，给a标签添加download属性
// 添加
a.download = 'diagram.png';