在vue项目中前端生成二维码

1、安装依赖包

"qrcode": "^1.5.3"

2、页面中使用

<template>
  <div>
    <img :src="qrCodeDataUrl" width="200" height="200" alt="二维码" />
    <button @click="saveQRCode">下载二维码</button>
  </div>
</template>
<script setup>
/**
 * @Date 2023-12-25
 * @Description 前端生成二维码
 */

import QRCode from 'qrcode';

let qrCodeDataUrl=ref('');
const generateQRCode=async ()=>{
  const data = '需要生成的二维码内容';
  try {
    qrCodeDataUrl.value = await QRCode.toDataURL(data);
  } catch (error) {
    console.error('生成二维码失败:', error);
  }
}

const saveQRCode=()=>{
  const downloadLink = document.createElement('a');
  downloadLink.href = qrCodeDataUrl.value;
  downloadLink.download = `二维码.png`;
  downloadLink.click();
}

generateQRCode();
</script>

<style scoped lang="scss">
</style>