二维码展示及下载

效果图：

1.使用插件vue-qr

2.template:

<template>
 <vue-qr ref="qrcode" :text="link" :size="100" margin="0"></vue-qr>
 <el-button type="primary" @click="download" link>下载二维码</el-button>
</template>
<script lang="ts" setup>
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import {ref} from 'vue'
const link=ref('https://www.baidu.com')
//下载二维码
const download = () => {
  const eleLink = window.document.createElement('a');
  eleLink.style.display = 'none';
  eleLink.download = '二维码';
  eleLink.href = qrcode.value?.imgUrl;
  eleLink.click();
  eleLink.remove();
}
</script>