vue.js3:用vue-qr生成二维码并下载(vue@3.2.36 / vue-qr@4.0.9)

一，下载安装vue-qr第三方库

1，安装

liuhongdi@lhdpc:/data/vue/imgtouch$ npm install vue-qr --save
 
added 11 packages in 5s

2,查看已安装库的版本:

liuhongdi@lhdpc:/data/vue/imgtouch$ npm list vue-qr
imgtouch@0.1.0 /data/vue/imgtouch
└── vue-qr@4.0.9 

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/01/vue-js3-yong-vueqr-sheng-cheng-er-wei-ma-bing-xia-zai-vue-3/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，js代码：

Qrcode.vue

<template>
  <div style="background:#efefef;">
    <vue-qr qid="qrid1" :callback="qrBack" :text="qrText" :size="sizeValue" :colorDark="colorValue" :logoSrc="logoSrc" ></vue-qr>

    <div>
      <button @click="downQr">下载生成的二维码图片</button>
    </div>

    <div>
      <el-input
          v-model="qrText"
          :rows="2"
          type="textarea"
          placeholder="请输入二维码的文本或链接等"
          style="width:500px;"
      />
    </div>

    <div>
      <span style="margin-left: 20px;">尺寸</span>
      <el-select style="width:100px;margin-left: 10px;" v-model="sizeValue" class="m-2" placeholder="Select" size="default">
        <el-option
            v-for="item in sizeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
      <span style="margin-left: 20px;margin-right: 10px;">颜色</span>
      <el-color-picker v-model="colorValue" style="margin-left: 10px;" />
      <span style="margin-left: 20px;">Logo</span>
      <input v-if="logoSrc.length == 0" style="margin-left: 10px;width: 180px;" type="file" ref="hiddenfile" accept="image/*" @change="handleLogoFile" class="hiddenInput"/>
      <button v-else style="margin-left: 10px;" @click="clearLogoFile" >清空Logo</button>
    </div>

  </div>
</template>

<script>
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import {ref} from "vue";
export default {
  name: "QrcodeImg",
  components: {
    vueQr,
  },
  setup() {
    //二维码的内容，如用户输入的链接等
    const qrText = ref("请输入二维码中的文本");

    //生成的二维码大小
    const sizeOptions = [
      {
        value: 100,
        label: '100',
      },
      {
        value: 200,
        label: '200',
      },
      {
        value: 400,
        label: '400',
      },
      {
        value: 600,
        label: '600',
      },
      {
        value: 800,
        label: '800',
      },
    ]
    //二维码的默认大小
    const sizeValue = ref(400);
    //二维码的默认颜色值，此处用黑色
    const colorValue = ref('#000000');
    //logo的src
    const logoSrc = ref("");
    //处理选中logo图片
    const handleLogoFile = (e) => {
      let file = e.target.files[0];
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () =>{
        logoSrc.value = reader.result;
        //console.log(reader)
      }
    }
    //清除选中的logo图片
    const clearLogoFile = () => {
      logoSrc.value = "";
    }
    //下载二维码图片
    const downQr = () => {
      let name  = new Date().getTime();
      let a = document.createElement("a");
      a.style.display = "none";
      a.download = name;
      a.href = qrData.value;
      document.body.appendChild(a);
      a.click();
    }
    //二维码图片的编码数据
    const qrData = ref("");
    //qr的回调，每次变动后把二维码的数据保存下来，供下载用
    const qrBack = (dataUrl,id) => {
      //console.log('qrback:');
      console.log(id);
      qrData.value = dataUrl;
    }

    return {
      qrText,
      sizeOptions,
      sizeValue,
      colorValue,
      downQr,
      qrBack,
      //---logo begin
      logoSrc,
      handleLogoFile,
      clearLogoFile,
    }
  }

};
</script>

<style scoped>
</style>

三，测试效果

四，查看vue的版本:

liuhongdi@lhdpc:/data/vue/imgtouch$ npm list vue
imgtouch@0.1.0 /data/vue/imgtouch
├─┬ @vue/cli-plugin-babel@5.0.4
│ └─┬ @vue/babel-preset-app@5.0.4
│   └── vue@3.2.36 deduped
├─┬ element-plus@2.2.2
│ ├─┬ @element-plus/icons-vue@1.1.4
│ │ └── vue@3.2.36 deduped
│ ├─┬ @vueuse/core@8.6.0
│ │ ├─┬ @vueuse/shared@8.6.0
│ │ │ └── vue@3.2.36 deduped
│ │ ├─┬ vue-demi@0.13.1
│ │ │ └── vue@3.2.36 deduped
│ │ └── vue@3.2.36 deduped
│ └── vue@3.2.36 deduped
└─┬ vue@3.2.36
  └─┬ @vue/server-renderer@3.2.36
    └── vue@3.2.36 deduped