a標簽下載圖片及js執行下載圖片

 一般HTML中下載

<div>
    <img id="img" src="./logo.png" alt="">
    <div><a href="./logo.png" download="fei_01.png">download_01</a></div>
    <div><button onclick="foo()">download_02</button></div>
</div>

<script>
    function foo() {
        const a = document.createElement('a')
        a.download = 'fei_02.png'; // 下載名字
        a.href = './logo.png' // 圖片地址(tip:不要帶https http)
        a.click();
        a.remove()
    }
</script>

 Vue 中下載圖片demo

<template>
  <div class="block">
    <span>下載圖片</span>
    <p><img :src="img" alt="圖片"></p>
    <p><a :href="img" download>直接下載</a></p>
    <button @click="downloadImg">下載圖片</button>
  </div>
</template>
<script>
import img from "@/assets/logo.png"

export default {
  data() {
    return {
      img
    }
  },
  methods: {
    downloadImg() {
      const a = document.createElement('a')
      a.download = '圖片名字.png';
      a.href = img
      a.click();
      a.remove()
    }
  },
};
</script>