前端实现链接生成二维码

一、安装安装 qrcode 库

npm install qrcode -S

二、具体代码

我用的vite+3.0+ts
而且多个地方需要生成二维码，所以我封装成hook

qrcode.ts

import { onMounted, ref } from 'vue'
import { toDataURL } from 'qrcode'

export default function getQrcode (url: string) {
  const qrCodeData = ref('')
  const options = {
    width: 100, // 二维码的宽度
    height: 100, // 二维码的高度
    color: {
      dark: '#000000',
      light: '#ffffff'
    }
  }
  onMounted(() => {
    toDataURL(url, options, (err, dataURL) => {
      if (err) {
        console.error(err)
        return
      }
  
      // 在这里可以使用生成的二维码 dataURL
      // console.log(dataURL)
      qrCodeData.value = dataURL
    })
  })

  return {
    qrCodeData
  }
}

index.vue

<template>
  <div class="login">
    login page
    <img :src="qrCodeData" alt="QR Code" title="QR Code" />
  </div>
</template>

<script lang="ts" setup>
import getQrcode from '@/hooks/qrcode'

const url = 'https://blog.csdn.net/weixin_44582045' // 你想生成二维码的链接

const { qrCodeData } = getQrcode(url)

</script>

<style lang="less" scoped>

</style>

三、效果