vue项目生成二维码功能使用QRCode

最新推荐文章于 2024-10-07 20:54:28 发布

LuviaWu

最新推荐文章于 2024-10-07 20:54:28 发布

阅读量784

点赞数 1

分类专栏：工作笔记 VUE 文章标签： vue项目生成二维码功能使用QRCode

本文链接：https://blog.csdn.net/LuviaWu/article/details/102624715

版权

工作笔记同时被 2 个专栏收录

47 篇文章 2 订阅

订阅专栏

VUE

27 篇文章 7 订阅

订阅专栏

1，导入第三方插件

npm install --save qrcode

2，在页面上引入

import QRCode from 'qrcode'

html：

 <div id='code'></div>
 <canvas id="canvas"></canvas>
 <el-button @click="uploadQR">下载二维码</el-button>

methods: {  
   // 生成二维码 that.Url是生成二维码的链接
    useqrcode() {
    var that = this
      var canvas = document.getElementById('canvas')
      // 去掉qrcode的边框（建议留1px；否则浏览器识别有些困难）
      QRCode.toCanvas(canvas, that.Url, { width: 500, height: 500, margin: 1 }, function(error) {
        if (error) console.error(error)
        console.log('success!')
      })
    },
    // 下载二维码
    uploadQR() {
      var canvas = document.getElementById('canvas')
      var a = document.createElement('a')
      console.log(canvas)
      // console.log(canvas[0])
      a.href = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')
      a.download = '二维码'
      a.click()
    }
  },