Vue Js SVG Download as Png | Download Svg Code

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue@3.2.12/dist/vue.global.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css"
    />
  </head>

<body>
    <div id="app">
      <h3 class="heading">Vue Js SVG Download as Png or Download Svg Code</h3>
      <div class="svg-container">
        <div class="svg-icon" v-html="svg"></div>
        <button class="button svg-download" @click="downloadSvg">
          Download SVG
        </button>
        
        <button class="button png-download" @click="downloadPng">
          Download PNG
        </button>
      </div>
    </div>

const downloadLink = document.createElement("a");
            downloadLink.href = svgUrl;
            downloadLink.download = "image.svg";
            downloadLink.click();
            URL.revokeObjectURL(svgUrl);
          },
          downloadPng() {
            const svgData = this.svg;
            const svgBlob = new Blob([svgData], { type: "image/svg+xml" });
            const svgUrl = URL.createObjectURL(svgBlob);

const svgImage = new Image();
            svgImage.onload = () => {
              const canvas = document.createElement("canvas");
              canvas.width = svgImage.width;
              canvas.height = svgImage.height;
              const canvasCtx = canvas.getContext("2d");
              canvasCtx.drawImage(svgImage, 0, 0);
              canvas.toBlob((blob) => {
                const pngUrl = URL.createObjectURL(blob);
                const downloadLink = document.createElement("a");
                downloadLink.href = pngUrl;
                downloadLink.download = "image.png";
                downloadLink.click();
                URL.revokeObjectURL(pngUrl);
              }, "image/png");
            };

svgImage.src = svgUrl;
          },
        },
      });

app.mount("#app");
    </script>

/* CSS for the svg download button */
      .button {
        background-color: #4caf50;
        color: #fff;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 4px;
        margin-bottom: 10px;
      }

/* CSS for the png download button */
      .png-download {
        background-color: #2196f3;
        margin-left: 10px;
      }

/* CSS for button hover effect */
      .button:hover {
        opacity: 0.8;
      }
    </style>
  </body>
</html>