生成二维码

单个生成

 <div id="qrcode-container" v-show="false"></div>


qrcode(item,idcass){
//item  是你要生成二维的内容，我的是一个产品的编号
//idcass  是一个class的id（qrcode-container）
  var idcass = idcass
  var qrcode = $(idcass).qrcode({
      text: item, // 你希望生成二维码的内容
      width: 128, // 二维码的宽度
      height: 128, // 二维码的高度
      render: "canvas", // 设置渲染方式
      correctLevel: 0 // 容错级别
  }).hide()
   //这里是把生成的二维码转成图片形式，可以拿到bs64格式。
  var canvas = qrcode.find('canvas').get(0);
  var imgcanvas = canvas.toDataURL('image/jpg')
  return imgcanvas

}

生成多个二维码

 <div id="qrcode-container" v-show="false"></div>


qrcode(item,idcass){
       //item是二维码的内容
      var texts = []
      texts.push(item)//因为是生成多个texts得是数组的。
      var qrcodeContainer = $('#qrcode-container');
      var qrcode1 = ''
      $.each(texts, function(index, text) {
      var qrcode = $('<div></div>')
 //idcass是div上的class名称。给每一个div都不一样的class名字，原因的就是为了更好获取。
                 .addClass(idcass) 
                 .qrcode({
                  text: text,
                  width: 100,
                  height: 100,
                  render: "canvas",
                  });
                  qrcode1 = qrcodeContainer.append(qrcode);
                });
        //生成的二维码转成图片形式
      var canvas = $(`.${idcass}`).find('canvas').get(0);
      var imgcanvas = canvas.toDataURL('image/jpg')
     return imgcanvas
}

我的功能是需要根据不同id生成二维码然后把二维码放在另一个地方去打印出来。 调用qrcode()返回的imgcanvas是bs64的。我用的是jq。

这个是vue的,安装qrcodejs2

 <div class="qrcode-pic" ref=codeitem  style="margin-top: 15px;"></div>


qrData:[{
  url:"127........."
 },{
  url:"127........."
 }]


qrCode(){
 this.$nextTick(()=>{//必须写在this.$nextTick否则会报错.
          this.qrData.forEach((item,index)=>{
          let code = item.url;
          this.$refs.codeitem.innerhtml="";
          new QRCode(this.$refs.codeitem[index], {
          text: code, //转成二维码的内容
          width:150,
          height: 150
            })
      })
  })
}