vue qrcode生成二维码并下载

没问题，下面是使用 vue-qrcode插件 生成二维码并下载的代码示例：

1.首先，你需要安装 vue-qrcode 插件，可以使用 npm 命令来进行安装:

npm install vue-qrcode --save

2.然后，在需要使用二维码的 Vue 组件中，导入 vue-qrcode 插件并创建一个新的 Vue 实例，并在这个实例中传递需要生成的二维码数据和相关参数：

<template>
  <div>
    <qrcode-vue :value="qrData" :size="150"></qrcode-vue>
    <button @click="downloadQRCode()">下载二维码</button>
  </div>
</template>

<script>
import QRCodeVue from 'vue-qrcode'
import domtoimage from 'dom-to-image'

export default {
  name: 'QRCodeGenerator',

  components: {
    QRCodeVue,
  },

  data() {
    return {
      qrData: '二维码数据',
    }
  },

  methods: {
    downloadQRCode() {
      const qrCodeEl = document.querySelector('.qrcode-vue')
      domtoimage
        .toBlob(qrCodeEl)
        .then(blob => {
          const url = window.URL.createObjectURL(blob)
          const a = document.createElement('a')
          a.href = url
          a.download = 'qrcode.png'
          a.click()
        })
        .catch(error => {
          console.error('Error occurred while downloading QR Code:', error)
        })
    },
  },
}
</script>

3.接下来，在 downloadQRCode 方法中，我们使用 dom-to-image 库将二维码图片转换为 Blob对象, 然后创建一个链接和 a 标签来生成下载链接，并触发 a 标签的 click事件进行下载。

请注意，这个例子使用了 dom-to-image库来转换图片为 Blob 对象，因此需要使用 npm 命令进行安装：

npm install dom-to-image --save

希望这个代码示例能够帮助到你！