vue 生成二维码为base64格式并下载到电脑-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 生成二维码为base64格式并下载到电脑。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。


// 下载
npm i qrcode -S

// 引入
import QRCode from 'qrcode'

// 使用
<div class="flex-y-center">
     <img :src="QRImgUrl" />
     <el-button type="primary" @click="saveBas64Img(QRImgUrl, '分销码')">下载二维码</el-button>
</div>

creatQrCode(QRlink) {   // QRlink是二维码的内容
      let opts = {
        errorCorrectionLevel: "L",//容错级别
        type: "image/png",//生成的二维码类型
        quality: 0.3,//二维码质量
        margin: 5,//二维码留白边距
        width: 220,//宽
        height: 220,//高
        text: QRlink,//二维码内容
        color: {
          dark: "#000",//前景色
          light: "#fff"//背景色
        }
	    };
	    QRCode.toDataURL(QRlink, opts , (err, url) => {
        if (err) throw err
        //将生成的二维码路径复制给data的QRImgUrl
        this.QRImgUrl = url
      })
    },
    saveBas64Img (url, name) {
      let base64 = url.toString()
      let byteCharacters = atob(
        base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, "")
      )
      let byteNumbers = new Array(byteCharacters.length)
      for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i)
      }
      let byteArray = new Uint8Array(byteNumbers)
      let blob = new Blob([byteArray], {
        type: undefined
      })
      let aLink = document.createElement("a")
      aLink.download = `${name}.png` //这里写保存时的图片名称
      aLink.href = URL.createObjectURL(blob)
      aLink.click()
    }