这几天需求需要做生成二维码的功能、试了很多组件、遇到无数坑、最终采用 qrious.
官网网站： https://www.npmjs.com/package/qrious

安装

npm install --save qrious

引用

import Qrious from 'qrious'

使用

生成二维码（base64），可以直接赋值给图片src使用

getQrCode (url) {
  let qr = new Qrious({
    value: url,
    size: 500
  })

  let blobFile = dataURLtoBlob(qr)
  blobToFile(blobFile, '二维码')
}

// base64转换成blob
dataURLtoBlob (dataurl) {
  const parts = dataurl.split(';base64,')
  const contentType = parts[0].split(':')[1]
  const raw = window.atob(parts[1])
  const rawLength = raw.length
  const uInt8Array = new Uint8Array(rawLength)
  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i)
  }
  return new Blob([uInt8Array], { type: contentType })
}

// 下载blob
blobToFile (theBlob, fileName) {
  const blob = this.dataURLtoBlob(theBlob) // new Blob([content]);
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, fileName)
  } else {
    const link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = fileName

    // 此写法兼容可火狐浏览器
    document.body.appendChild(link)
    const evt = document.createEvent('MouseEvents')
    evt.initEvent('click', false, false)
    link.dispatchEvent(evt)
    document.body.removeChild(link)
  }
}