程序开发

vue qrcode 生成二维码并下载png图片

基于 qrcode 二维码生成插件,

先下载npm i --save qrcode

引用页:

<rqcode :dialog="dialog" :uuid="uuid" :imei="imei" @dialogChange="dialog = false"/>
import rqcode from "./componenrts/RQcode";
export default {
  components: {
    rqcode
  },
  data() {
    return {
      dialog: false,
      imei: "",
      uuid: "",
    };
  },
  methods:{
    // 生成二维码事件
    getRQcode(){
      this.uuid = id;
      this.imei = imei;
      // 以上为参数 ,可以自定义添加或者组合
      this.dialog = true;
    },
  }
};

生成二维码组件:

<template>
  <el-dialog
    title="设备二维码"
    :visible="dialogVisible"
    width="30%"
    close-on-press-escape
    close-on-click-modal
    show-close
  >
    <div style="text-align: center;">
      <canvas ref="myCanvas" id="msg"></canvas>
      <p>uuid: {{ uuid }}</p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false; $emit('dialogChange', false)">关 闭</el-button>
      <el-button type="primary" @click="downRQcode">下 载</el-button>
    </span>
  </el-dialog>
</template>

<script>
import QRCode from "qrcode";
export default {
  props: { 
    uuid: {
      default: ""
    },
    imei: {
      default: ""
    },
    dialog: {
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  watch: {
    dialog(e) {
    this.dialogVisible = e;
    this.useqrcode(this.uuid)
    }
  },
  methods: {
    // 生成二维码
    useqrcode(val) {
      const that = this;
      setTimeout(() => {
        var canvas = document.getElementById("msg");
        QRCode.toCanvas(canvas, val, function(error) {
          if (error) console.error(error);
          console.log("QRCode success!");
        });
      }, 500);
    },
    // 下载图片按钮
    downRQcode() {
      this.saveImg();
    },
    // 下载图片
    saveImg() {
      const canvasData = document.getElementById("msg");
      const a = document.createElement("a");
      a.href = canvasData.toDataURL();
      a.download = this.imei;
      a.click();
    }
  }
};
</script>

源码:https://github.com/hlbj105/blog/blob/master/Vue/RQcode.vue

黄良钵
博客站长,前端开发工程师
查看“黄良钵”的所有文章 →

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关推荐