qrcode-generator 库生成包含 vCard 数据的二维码时，如果遇到中文乱码问题

使用 qrcode-generator 库生成包含 vCard 数据的二维码时，如果遇到中文乱码问题，主要是由于vCard数据编码不正确导致。vCard标准支持UTF-8编码，因此确保你将汉字转换为正确的UTF-8编码格式是解决乱码问题的关键步骤。

以下是一个处理vCard数据并确保其正确编码的示例

<template>
  <div>
    <div ref="canvasRef" :style="{ width: '200px', height: '200px' }"></div>
  </div>
</template>

<script lang="ts" setup>
// 导入所需依赖
import { ref, onMounted } from 'vue'
import QRCode from 'qrcode-generator'
// 假设你已经有了一个包含中文的vCard字符串
const vcardstr = `BEGIN:VCARD
VERSION:4.0
N:张;三六;;;
FN:张三五
ORG:Example Company;
TITLE:产品经理
TEL;TYPE=CELL:+86 13912345678
EMAIL;TYPE=PREF,INTERNET:san.zhang@example.com
ADR;TYPE=HOME:;;北京市朝阳区某某街道1号;北京;中国
NOTE:这是个人备注信息，包含中文。
END:VCARD`
console.log(vcardstr, 'vcard_utf8')
//对于vCard中的中文部分，确保它们已经是UTF-8编码，或者已经正确转义为符合vCard标准的格式
const canvasRef = ref<HTMLCanvasElement | null>(null)
// 初始化时生成二维码数据
onMounted(() => {
  qrcodeimg()
})
const qrcodeimg = () => {
  // ***确保vCard数据已经UTF-8编码***
  const utf8EncodedVCard = unescape(encodeURIComponent(vcardstr))
  // 创建并配置二维码实例
  const qr = QRCode(12, 'L') // 容错级别L、M、Q、H
  qr.addData(utf8EncodedVCard) // 添加vCard数据
  qr.make() // 生成二维码
  // 将二维码渲染到canvas元素上
  if (canvasRef.value) {
    const canvas = document.createElement('canvas')
    canvas.width = qr.getModuleCount() * 4
    canvas.height = qr.getModuleCount() * 4
    let ctx: CanvasRenderingContext2D | null = canvas.getContext('2d')
    // 添加一个条件判断，确保ctx不是null之后再进行绘图操作
    if (ctx) {
      for (let row = 0; row < qr.getModuleCount(); row++) {
        for (let col = 0; col < qr.getModuleCount(); col++) {
          ctx.fillStyle = qr.isDark(row, col) ? '#005087' : '#fff'
          ctx.fillRect(col * 4, row * 4, 4, 4)
        }
      }
      // 将生成的canvas元素添加到DOM树中
      canvasRef.value.appendChild(canvas)
    } else {
    	console.error('Failed to get the 2D rendering context for the canvas element.')
 	}
  }
}
</script>

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