Vue3 + qrcode.vue 实战：带 Logo 二维码生成 / 导出 / 版本遍历

废话不说，先上代码 行🎨

  <div class="label-company-dialog">
    <vab-dialog title="生产企业信息" v-model="visible" width="50%" @close="close">
      <div :id="`qrcode-container-${row.id}`" v-for="row in source" :key="row.id">
        <qrcode-vue
          :title="row.value"
          :key="row.id"
          :value="row.value"
          :size="180"
          :image-settings="imageSettings"
          style="margin-right: 20px"
        />
        <el-button type="primary" @click="downloadImg(row.id)">下载二维码</el-button>
      </div>
    </vab-dialog>
  </div>
</template>

<script setup>
import QrcodeVue from 'qrcode.vue'
import { ref } from 'vue'

const visible = ref(true)
const tableData = ref([])

const qrcodeVue = ref(null)
const source = ref([
  {
    id: 1,
    value: 'https://ant-design.antgroup.com/components/table-cn',
  },
  {
    id: 2,
    value: 'https://www.doubao.com/chat/38418424533247234',
  },
])

const imageSettings = ref({
  src: 'https://oss.daiyoujia.cn/dzbq/other/police-logo.png',
  height: 20,
  width: 20,
})

const show = (data) => {
  visible.value = true
  tableData.value = data
}
const close = () => {
  visible.value = false
}

const downloadImg = (id) => {
  //获取canvas标签
  let canvas = document.getElementById(`qrcode-container-${id}`).getElementsByTagName('canvas')

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

defineExpose({
  show,
})
</script>

这时候二维码正常显示，logo也正常显示，扫码一切都可以，但是 点击下载出现了问题，百思不得其解🤔🤔🤔🤔

也是搜了很多网上的案例，现在ai也很发达，但是都是解决不了，后来的后来，我才想起来是不是网络图片的问题，绝了，我恨啊😳😳😳

然后就将 网络图片，放置在了项目的中目录中，然后引入，就就就ok了，

import QrcodeVue from 'qrcode.vue'
import { ref } from 'vue'
import qrlogo from '/@/assets/dzbq-images/dzbq-logo.png'

const visible = ref(true)
const tableData = ref([])

const qrcodeVue = ref(null)
const source = ref([
  {
    id: 1,
    value: 'https://ant-design.antgroup.com/components/table-cn',
  },
  {
    id: 2,
    value: 'https://www.doubao.com/chat/38418424533247234',
  },
])

const imageSettings = ref({
  src: qrlogo,
  height: 20,
  width: 20,
})

完整代码

<template>
  <div class="label-company-dialog">
    <vab-dialog title="生产企业信息" v-model="visible" width="50%" @close="close">
      <div :id="`qrcode-container-${row.id}`" v-for="row in source" :key="row.id">
        <qrcode-vue
          :title="row.value"
          :key="row.id"
          :value="row.value"
          :size="180"
          :image-settings="imageSettings"
          style="margin-right: 20px"
        />
        <el-button type="primary" @click="downloadImg(row.id)">下载二维码</el-button>
      </div>
    </vab-dialog>
  </div>
</template>

<script setup>
import QrcodeVue from 'qrcode.vue'
import { ref } from 'vue'
import qrlogo from '/@/assets/dzbq-images/dzbq-logo.png'

const visible = ref(true)
const tableData = ref([])

const qrcodeVue = ref(null)
const source = ref([
  {
    id: 1,
    value: 'https://ant-design.antgroup.com/components/table-cn',
  },
  {
    id: 2,
    value: 'https://www.doubao.com/chat/38418424533247234',
  },
])

const imageSettings = ref({
  src: qrlogo,
  height: 20,
  width: 20,
})

const show = (data) => {
  visible.value = true
  tableData.value = data
}
const close = () => {
  visible.value = false
}

const downloadImg = (id) => {
  //获取canvas标签
  let canvas = document.getElementById(`qrcode-container-${id}`).getElementsByTagName('canvas')

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

defineExpose({
  show,
})
</script>

本次记录，只是想着 自己淋过雨，就想给其他人打个☂️☂️☂️ 哈哈哈 牛马人工作愉快😛😛😛