vue插件qrcode实现二维码功能

1.安装

npm install qrcode --save

2.页面引入并使用

方式一：

<template>
  <div>
    <div id='code'></div>
    <canvas id="canvas"></canvas>
  </div>
</template>

import QRCode from 'qrcode'
  export default{
    data(){
      return {
        codes:''
      }
    },
    components: {
      QRCode: QRCode
    },
    methods:{
      useqrcode(){
        var canvas = document.getElementById('canvas')
        QRCode.toCanvas(canvas, 'http://www.baidu.com', function (error) {
          if (error) {console.error(error)}else{console.log('success!');}        
        })
      }
    },
    mounted(){
      this.useqrcode();
    }
  }

方式二：通过input的内容实现二维码

<template>
    <div class="hello">
        // 用于输入内容的input
        <input v-model="message">
        // 将获取到的信息画到画布上
        <canvas id="msg"></canvas>
    </div>
</template>

<script>
    // 引入qrcode
    import QRCode from 'qrcode'
    export default{
      data(){
          return {
              message:'',
          }
      },
      watch:{
          // 通过监听获取数据
          message(val){
              // 打印获取到的数据
              console.log(val)
              // 获取页面的canvas
              var msg= document.getElementById('msg')
              // 将获取到的数据（val）画到msg（canvas）上
              QRCode.toCanvas(msg, val, function (error) {
                    console.log(error)
              })
          },
      },
  }
</script>

<style>
    // 由于输入的内容不同，展示的二维码大小页不一样，所以这里限制画布的大小
    #msg{
        width:200px;
        height:200px;
    }
</style>

3.保存成图片并下载

//保存图片
savePic(){
//找到canvas标签
  let myCanvas = document.getElementsByTagName('canvas');
//创建一个a标签节点
  let a = document.createElement("a")
//设置a标签的href属性（将canvas变成png图片）
  a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
//设置下载文件的名字
  a.download = "班级二维码.png"
//点击
  a.click()
//弹出提示
  this.$message({message:'亲，正在进行下载保存',type:'warning'})
 
},

注：这种当时适合在pc端，手机端是有问题的。

手机端可以利用img标签实现，然后长按图片保存。详情见另一篇博客：https://blog.csdn.net/xiasohuai/article/details/88378046