Vue 链接生成二维码

1.安装qrcodejs2

cnpm i qrcodejs2 --save 

或者

npm i qrcodejs2 --save 

2.在需要用的页面中引入

 <div id="qrcode" ref="qrcode"></div>

3.methods 方法中使用

qrcode () {
      let qrcode = new QRCode("qrcode", {

        width: 200, // 二维码宽度，单位像素

        height: 200, // 二维码高度，单位像素

        text: "https://www.baidu.com/" // 生成二维码的链接

      });

    },

4. 如果你想把 生成的二维码下载到本地可以使用html2canvas插件

npm install --save html2canvas

然后再所需页面中引入

import html2canvas from "html2canvas"

页面中

 <div ref="imageWrapper" style="width: 300px;height: 250px">
      <div id="qrcode" ref="qrcode" ></div>
  </div>

methods方法中使用

  dataURLtoBlob(baseurl) {
      const arr = baseurl.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], {
        type: mime
      })
    },
    // 下载二维码
    Download(){
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      html2canvas(this.$refs.imageWrapper, {
        backgroundColor: null
      }).then((canvas) => {
        const dataURL = canvas.toDataURL('image/png')
        var ss = this.dataURLtoBlob(dataURL)
        console.log(ss)
        const content = ss // 后台返回二进制数据
        const blob = new Blob([content])
        const fileName = '二维码.png'
        if ('download' in document.createElement('a')) { // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else { // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },