生成二维码 并可以点击下载(多个二维码一起渲染)

这里说下qrcode 这个插件 生成二维码，并且可以点击下载

效果：后台获取数据渲染

1.安装qrcode npm install qrcode
2.在需要的页面中 import QRCode from 'qrcode’
3.html

mounted() {
   let canvas = this.$refs.canva;				//渲染的时候是个数组所以跟单个画图还有点不一样 得到的是个数组
    for(let i in canvas){
       QRCode.toCanvas(canvas[i], this.$store.state.userInfo.projectVoList[i].join_manage_url, function (error) {//第二个参数是url
         if (error) console.error(error)
         console.log('success!');
       })
     }
  },

4.效果

5。点击按钮保存图片，这是一个canvas

<el-button type="primary" @click="exportCanvasAsPNG('erweima',index)">下&nbsp;载</el-button>

exportCanvasAsPNG( fileName,index) {		
          var canvasElement =  this.$refs.canva[index];

          var MIME_TYPE = "image/png";

          var imgURL = canvasElement.toDataURL(MIME_TYPE);

          var dlLink = document.createElement('a');
          dlLink.download = fileName;
          dlLink.href = imgURL;
          dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');

          document.body.appendChild(dlLink);
          dlLink.click();
          document.body.removeChild(dlLink);
      },

6：效果