vue qrcode-vue 生成二维码并可以下载

安装qrcode.vue

yarn add qrcode.vue

生成二维码

<template>
  <div id="app">
   <qrcode-vue :value='value' :size='180'/>
  </div>
</template>

<script setup>
import QrcodeVue from 'qrcode.vue'

const value = ref('...') //二维码内容地址
</script>

下载二维码

    downloadImg() {
      //获取canvas标签
      let canvas = document.getElementById('app').getElementsByTagName('canvas')
      //创建a标签
      let a = document.createElement('a')
      //获取二维码的url并赋值为a.href
      a.href = canvas[0].toDataURL('img/png')
      //设置下载文件的名字
      a.download = '二维码'
      //点击事件，相当于下载
      a.click()
      a.remove()
    }