vue前端生成二维码

第一种

安装：npm install --save qrcodejs2
引入：// import QRCode from ‘qrcodejs2’

    
      
      //css样式 是让二维码在el-dialog居中显示
      
    
    在点击按钮调用生成二维码的方法
     handleQR() {
      this.dialogVisible = true
      // this.creatQrCode()
      // document.getElementById('picture').innerHTML = '' 防止每打开一次dialog弹框二维码就生成一次
    },
    // creatQrCode() {
    //   this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
    //     text: '扫描二维码', // 需要转换为二维码的内容
    //     width: 200,
    //     height: 200,
    //     colorDark: '#000000',
    //     colorLight: '#ffffff',
    //     correctLevel: QRCode.CorrectLevel.H
    //   })
    // },
    //   @opened="creatQrCode()"解决第一次打开dialog二维码加载不到的问题
     // 保存图片
    savePic() {
      // 找到canvas标签
      const myCanvas = document.getElementById('picture').getElementsByTagName('canvas')
      // 创建一个a标签节点
      const 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' })
    },

    

第二种

安装：npm i vue-qriously -S
main.js中引入：
import VueQriously from ‘vue-qriously’//生成二维码
Vue.use(VueQriously)

  ## 
    第二种方法 下载的二维码更美观
    dialog弹框里：
      

        

          
          
卡券二维码
          保存图片
        
      
    handleQR() {
      this.dialogVisible = true
      this.qrcode = ‘test’
    },