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

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇