vue3+ts 使用插件vue-qr生产二维码图片并下载

1. 下载：

npm install vue-qr --save
或
yarn add vue-qr --save
或
pnpm add vue-qr --save

2.引用： 

vue3中引用：import vueQr from 'vue-qr/src/packages/vue-qr.vue';

vue2中引用：import VueQr from 'vue-qr'

3. vue-qr npm库地址：

vue-qr - npm

查询各属性介绍

 4. 使用HTML代码示例

<template>
<!-- 需要展示二维码就不用隐藏 -->
    <vue-qr
      ref="qrcode"
      :text="qrCodeValue"
      logo-src=""
      :size="500"
      style="display: none"
    ></vue-qr>
  <a-button type="link" @click="download">下载</a-button>
</template>

5.ts代码示例：

<script lang="ts" setup>
import vueQr from 'vue-qr/src/packages/vue-qr.vue';
const qrcode = ref<typeof vueQr>(); // 实例
const qrCodeValue = ref(''); //二维码内容
// 下载
const download = () =>{
   // TODO 接口返回数据  
      let res = "112233"
   // 数据返回生产二维码
     qrCodeValue.value = res ;

     // 生成二维码是属于异步行为，所以下载二维码也为异步行为

      const timer = setTimeout(() => {

       // 可打印获取二维码插件里的数据
        console.log('data', qrcode.value);
        console.log('下载签到码', qrcode.value.imgUrl);

        // 下载
        // 注，当在vue3+ts项目中，识别不了document是，前面加上window

        const eleLink = window.document.createElement('a');
        eleLink.style.display = 'none';
        eleLink.download = '二维码';
        eleLink.href = qrcode.value.imgUrl;
        eleLink.click();
        eleLink.remove();
        clearTimeout(timer);
      });
}
</script>