vue中使用 qrcode 生成二维码，并可以打印下载

一. 安装QRCode

npm install qrcode

二. 页面中使用

<canvas id="baseCanvas"></canvas>
<el-button type="primary" size="small" @click="printCode">打印二维码</el-button>
<el-button type="primary" size="small" @click="_downloadQrcode">下载二维码</el-button>

三. js引用

import QRCode from 'qrcode'

export default {
    data() {
      return {
        
      }
    },
    methods: {
      printCode() {
        let cans = document.getElementById("baseCanvas");
        let img_png_src = cans.toDataURL("image/png");  //将canvas保存为图片
        let newWin = window.open("")  //新打开一个空窗口
        newWin.document.write('<img src="'+ img_png_src + '" />')
        newWin.document.close()
        newWin.focus()
        setTimeout(() => {
          newWin.print()
          newWin.close()
        }, 100)
      },
      useqrcode(){
        let canvas = document.getElementById('baseCanvas'); //找到cancas的id
        let webUrl = process.env.VUE_APP_REGISTER_URL;	//定义要生成的内容
        webUrl = webUrl.replace('{referrer}', this.name).replace('{shareRandomCode}', this.companyCode)
        //{width:88,height:88,margin:1} 这个地方就是设置样式的地方
        QRCode.toCanvas(canvas, webUrl,{width:300,height:300,margin:1}, function (error) {
          if (error) console.error(error)
          console.log('success!');
        })
      },
      _downloadQrcode: function(){
        let cans = document.getElementById("baseCanvas");
        let type = 'png';   //设置下载图片的格式
        let img_png_src = cans.toDataURL("image/png");  //将canvas保存为图片
        let imgData = img_png_src.replace(this._imgType(type),'image/octet-stream');
        let filename = '图片' + '.' + type; //下载图片的文件名
        this._saveFile(imgData,filename);
      },
      _imgType:function(ty) {
          let type = ty.toLowerCase().replace(/jpg/i, 'jpeg');
          var r = type.match(/png|jpeg|bmp|gif/)[0];
          return 'image/' + r;
      },
      _saveFile:function(data, fileName){
        let save_link = document.createElement('a');
          save_link.href = data;
          save_link.download = fileName;

          let event = document.createEvent('MouseEvents');
          event.initEvent("click", true, false);
          save_link.dispatchEvent(event);
      },
    },
    computed: {
      ...mapGetters([
        'companyCode', //公司推广码
        'name', //公司名称
      ])
    },
    mounted() {  //调用
      this.useqrcode()
    }
  }