a标签下载图片及js执行下载图片

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>