Vue3项目生成并下载二维码，关于vue-qr.vue与qrcode.vue插件之间的区别

1、vue-qr.vue与qrcode.vue大致区别

vue-qr.vue：体积较大，大概4M左右，可以给二维码添加中心logo，生成二维码为img标签，可下载

qrcode.vue：体积较小，不能给二维码添加logo，生成二维码为canvas标签，可下载

2、引入与生成、下载二维码的代码区别

2.1、vue-qr.vue引入方式、业务代码：

官网：vue-qr - npm

// vue2.0 ：import VueQr from 'vue-qr'

// vue3.0 (support vite) ：import vueQr from 'vue-qr/src/packages/vue-qr.vue'

<template>
    <vue-qr id="qrcode" :text='value' :logoSrc='logoSrc' size=135></vue-qr><br />
    <el-button @click="saveImg">下载二维码</el-button>
</template>

<script setup>
    //vue3代码
    import code_logo from '../../assets/vue.svg'

    const props = defineProps({
        value: {
            type: String,
            default: 'https://www.baidu.com/'
        },
    })
    let logoSrc = code_logo

    function saveImg() {
        let picData = document.getElementById("qrcode") //生成二维码之后其实是个img
        let a = document.createElement("a");
        a.href = picData.src;
        a.download = "qrcode.png";
        a.click();
    }
</script>

效果如下图：

2.2、qrcode.vue引入方式、业务代码：

import QrcodeVue from 'qrcode.vue';

<template>

    <qrcode-vue class="qrcode" size=135 :value="value"></qrcode-vue>
    <br />
    <el-button @click="saveImg">下载二维码</el-button>

</template>

<script>
    const props = defineProps({
        value: {
            type: String,
            default: 'https://www.baidu.com/'
        }
    })
    function savaImg(){
        var canvasData = document.getElementsByClassName('qrcode')
        var a = document.createElement("a");
        a.href = canvasData[0].toDataURL();;
        a.download = "Qrcode";
        a.click();
    }

</script>

效果如图：