前端vue2.0實現復制鏈接，鏈接生成二維碼圖片，二維碼圖片下載

 

<template>
  <div class="wap-wrap">
    <h1>復制WAP鏈接</h1>
    <div class="input-box">
      <Input
        disabled
        search
        v-model="inputData"
        enter-button="復制鏈接"
        @click.native="initClipboard(inputData, $event)"
        class="needsclick"
      />
    </div>
    <div class="href-box">
      <a ref="downloadRef" @click="downloadQrcode()"> 下載二維碼 </a>
    </div>
    <div class="img-wrap">
      <p>管控助手</p>
      <div class="img-box" ref="qrCodeUrl"></div>
    </div>
  </div>
</template>

<script>
import Clipboard from "clipboard";
import QRCode from "qrcodejs2";
export default {
  components: {},
  data() {
    return {
      inputData: "",
    };
  },
  mounted() {
    this.getUrl(); //獲取url
    this.creatQrCode(); //二維碼生成
  },
  created() {},
  methods: {
    //復制鏈接
    initClipboard(text, e) {
      const clipboard = new Clipboard(event.target, {
        text: () => text,
      });
      clipboard.on("success", () => {
        this.$Message.success("復制成功!");
        clipboard.off("error");
        clipboard.off("success");
        clipboard.destroy();
      });
      clipboard.on("error", () => {
        this.$Message.error("復制失敗!");
        clipboard.off("error");
        clipboard.off("success");
        clipboard.destroy();
      });
      clipboard.onClick(event);
    },
    //獲取url
    getUrl() {
      this.inputData = "http://www.baidu.com";
    },
    //二維碼生成
    creatQrCode() {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: this.inputData, // 需要轉換為二維碼的內容
        width: 200,
        height: 200,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
    //下載二維碼
    downloadQrcode() {
      let canvas = this.$refs.qrCodeUrl.firstChild; //取到canvas
      try {
        //解決IE轉base64時緩存不足，canvas轉blob下載
        var blob = canvas.msToBlob();
        navigator.msSaveBlob(blob, "管控助手.jpg");
      } catch (e) {
        //如果為其他瀏覽器，使用base64轉碼下載
        var url = canvas.toDataURL("image/jpeg");
        // 創建a鏈接
        const a = document.createElement("a");
        a.href = url;
        a.download = "";
        // 觸發a鏈接點擊事件，瀏覽器開始下載文件
        a.click();
      }
    },
    //判斷瀏覽器類型
    myBrowser() {
      var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
      var isOpera = userAgent.indexOf("Opera") > -1;
      if (isOpera) {
        return "Opera";
      } //判斷是否Opera瀏覽器
      if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
      } //判斷是否Firefox瀏覽器
      if (userAgent.indexOf("Chrome") > -1) {
        return "Chrome";
      }
      if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
      } //判斷是否Safari瀏覽器
      if (
        userAgent.indexOf("compatible") > -1 &&
        userAgent.indexOf("MSIE") > -1 &&
        !isOpera
      ) {
        return "IE";
      } //判斷是否IE瀏覽器
      if (userAgent.indexOf("Trident") > -1) {
        return "Edge";
      } //判斷是否Edge瀏覽器
    },
  },
};
</script>

<style lang="less" scoped>
.input-box {
  display: inline-block;
  width: 60%;
}
.href-box {
  display: inline-block;
  position: relative;
  left: 14px;
  top: -10px;
}
.img-wrap {
  width: 50%;
  text-align: center;
  p {
    margin: 10px 0;
  }
  .img-box {
    display: flex;
    justify-content: center;
  }
}
</style>