依赖

pnpm add html2canvas # html转换canvas
pnpm add vue-qr # 二维码生成
pnpm add file-saver # 图片下载

实现

<template>
  <div id="vue-qr-con" ref="vueQrRef">
    <vue-qr :logoSrc="logo" :size="size" :text="value" />
  </div>
</template>
<script setup>
import logo from '@/assets/logo.png';
import { ref } from 'vue';
import html2canvas from 'html2canvas';
import vueQr from 'vue-qr/src/packages/vue-qr.vue';
import { saveAs } from 'file-saver';
import { dayjs } from 'element-plus';

const vueQrRef = ref();
const props = defineProps({
  value: String,
  size: {
    type: Number,
    default: 300
  }
});

defineExpose({
  getQrImg
});

function getQrImg() {
  const time = dayjs(Date.now()).format('YYYY-MM-DD HH:mm');
  html2canvas(vueQrRef.value).then((canvas) => {
    canvas.toBlob(function(blob) {
      saveAs(blob, `应用二维码-${time}.png`);
    });
  });
}
</script>
<style lang="less" scoped></style>

🎯 拓展阅读提示

本文涉及的内容已同步至公众号后台，我会在那里分享更多深度内容和实用技巧

→ 点击关注：一行梦境