前端vue2生成二维码并可保存

前端搬砖达人

已于 2024-01-17 14:15:39 修改

阅读量814

点赞数 9

文章标签：前端 vue

于 2024-01-17 14:14:29 首次发布

本文链接：https://blog.csdn.net/wyq12138/article/details/135649239

版权

这里分成两步：

生成二维码

1、使用qrcode.js生成二维码

npm i qrcode --save

2、使用逻辑

 <canvas id="merQRCode" style="display: inline-block"></canvas>
    toMakeQRCode(value) {
      var qrCodeDom = document.getElementById("merQRCode");
      QRCode.toCanvas(
        qrCodeDom,
        value,
        {
          width: 250,
        },
        function (error) {}
      );
    },

这里就已经生成二维码成功了

点击保存按钮下载二维码

1、使用html2canvas下载

npm i html2canvas --save

2、点击保存按钮下载二维码

  toSave() {
      html2canvas(document.getElementById("QRCodeBox")).then(canvas => {
        let saveUrl = canvas.toDataURL('image/png')
        let aLink = document.createElement('a')
        let blob = this.base64ToBlob(saveUrl)
        let evt = document.createEvent('HTMLEvents')
        evt.initEvent('click', true, true)
        aLink.download = '二维码.jpg'
        aLink.href = URL.createObjectURL(blob)
        aLink.click()
      });
    },

2、把图片转base64

 base64ToBlob (code) {
       let parts = code.split(';base64,')
       let contentType = parts[0].split(':')[1]
       let raw = window.atob(parts[1])
       let rawLength = raw.length
       let uInt8Array = new Uint8Array(rawLength)
       for (let i = 0; i < rawLength; ++i) {
           uInt8Array[i] = raw.charCodeAt(i)
       }
       return new Blob([uInt8Array], {type: contentType})
   },