웹 프런트 엔드의 QR 코드에서 링크 바인딩 실현

1. QR 코드 생성 플러그인 다운로드

npm install qrcode -S

2. DOM 요소 준비

<canvas id="qrcodeEle"></canvas>

3. 링크 바인딩 및 QR 코드 생성

import QRCode from "qrcode";// 引入插件


// 生成二维码
let address = "https://blog.csdn.net/liuxin00020/"; // 获取要生成二维码的地址
let canvas = document.getElementById("qrcodeEle"); // 获取元素
QRCode.toCanvas(canvas, address, { width: 500, height: 500 }, (error) => {
  if (error) {
    console.error(error);
  } else {
    console.log("QR code generated successfully");
  }
});