vue生成二维码：vue-qr二维码插件使用

npm i qrcode

<template>
  <div>
    <img :src="qrcode" width="192">
  </div>
</template>>

import QRCode from ‘qrcode‘
export default{
  data(){
    return{
      qrcode:‘‘
    }
  },
  mounted(){
    this.setQRCode(‘http:xxx.xx‘)
  },
  methods:{
    // 根据字符串生成二维码
    setQRCode(str) {
      QRCode.toDataURL(str, { width: 192, margin: 1 }).then(res=>{
        // toDataURL方法返回一个promise
        this.qrcode = res;
      })
    }
  }
}

QRCode.create("str")
// 返回结果为对象
// {
//   modules,              // 具有模块数据的Bitmatrix类
//   version,              // 版本
//   errorCorrectionLevel, // 纠错级别
//   maskPattern,          // 计算后的遮罩图案
//   segments              //  segments
// }

  <canvas id="canvas"></canvas>

var canvas = document.getElementById(‘canvas‘)

QRCode.toCanvas(canvas, ‘str‘, function (err) {
  if (err) console.log(err)
})

//此方法是刚开始例子的nodejs写法，这里的回调函数参数不同
QRCode.toDataURL("str", (err, res) => {
  // 注意这里第一个参数是err,第二个参数才是二维码图片链接
  this.qrcode = res;
});

<div v-html="qrcode" style="width:192px"></div>

QRCode.toDataURL("str", (err, res) => {
  // 注意这里的res结果是一个svg图片
  this.qrcode = res;
});

// 这个方法试了没成功，暂存一下
QRCode.toFile("path/filename.png", "str", err => {
  if (err) throw err;
});