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

标签：vue,浏览器,msSaveOrOpenBlob,base64,点击,let,bstr,download,下载
来源： https://www.cnblogs.com/aknife/p/14007571.html