前端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>