vue點擊下載圖片

<template>

  <div>

    <a

      v-if="!isFirefox"

      @click.stop.prevent="handleDownloadQrIMg"

      class="qrcode"

    >

      <img src="static/img/load.png">

    </a>

    <a

      v-if="isFirefox"

      :href="prefixBase64 + qrBase64"

      download="qrcode.png"

      class="qrcode"

    >

      <img src="static/img/load.png">

    </a>

 

  </div>

 

</template>

 

<script>

export default {

  data() {

    return {

      qrBase64: "", // 二維碼對應的base64（在方法里面進行獲取）

      prefixBase64: "data:image/png;base64,", // base64前綴

      isFirefox: false

    };

  },

  mounted() {

    // 判斷瀏覽器是否是火狐

    if (navigator.userAgent.indexOf("Firefox") > 0) {

      this.isFirefox = true;

    }

  },

  methods: {

    // 點擊下載圖片

    handleDownloadQrIMg() {

      // 這里是獲取到的圖片base64編碼,這里只是個例子哈，要自行編碼圖片替換這里才能測試看到效果

      const imgUrl = this.prefixBase64 + this.qrBase64;

      // 如果瀏覽器支持msSaveOrOpenBlob方法（也就是使用IE瀏覽器的時候），那么調用該方法去下載圖片

      if (window.navigator.msSaveOrOpenBlob) {

        let bstr = atob(imgUrl.split(",")[1]);

        let n = bstr.length;

        let u8arr = new Uint8Array(n);

        while (n--) {

          u8arr[n] = bstr.charCodeAt(n);

        }

        let blob = new Blob([u8arr]);

        window.navigator.msSaveOrOpenBlob(blob, "chart-download" + "." + "png");

      } else {

        // 這里就按照chrome等新版瀏覽器來處理

        let a = document.createElement("a");

        a.href = imgUrl;

        a.setAttribute("download", "chart-download");

        a.click();

      }

    }

  }

};

</script>

轉載https://www.cnblogs.com/usebtf/p/10839222.html