使用qrcode 前端生成二维码

  1. 安装依赖
bash 复制代码
npm install qrcode
  1. 在Vue中使用
bash 复制代码
<template>
  <div class="qr-code-generator">
    <input
      v-model="text"
      type="text"
      placeholder="请输入要生成二维码的内容"
      class="input-box"
    />
    <button @click="generateQRCode" class="generate-btn">生成二维码</button>
    <canvas ref="qrCanvas" class="qr-canvas"></canvas>
  </div>
</template>

<script>
import QRCode from "qrcode";

export default {
  name: "QRCodeGenerator",
  data() {
    return {
      text: "", 
    };
  },
  methods: {
    generateQRCode() {
      const canvas = this.$refs.qrCanvas;
      if (this.text.trim()) {
        QRCode.toCanvas(canvas, this.text, { errorCorrectionLevel: "H" }, (error) => {
          if (error) {
            console.error("二维码生成失败", error);
          }
        });
      } else {
        alert("请输入内容");
      }
    },
  },
  //下载图片
   downloadQRCode () {
	  const canvas = this.$refs.qrCanvas;
	  const url = canvas.toDataURL();
	  const link = document.createElement("a");
	  link.href = url;
	  link.download = "qrcode.png";
	  link.click();
	};
};
</script>

<style scoped>
.qr-code-generator {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.input-box {
  padding: 10px;
  width: 300px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.generate-btn {
  padding: 10px 20px;
  border: none;
  background-color: #4caf50;
  color: white;
  cursor: pointer;
  border-radius: 5px;
}

.qr-canvas {
  margin-top: 20px;
}
</style>
  1. 拓展
  • 样式自定义
bash 复制代码
QRCode.toCanvas(canvas, this.text, {
  width: 300,
  color: {
    dark: "#000", // 二维码颜色
    light: "#fff", // 背景颜色
  },
});
  • 支持多种生成方式
    通过 v-if 或 v-show 切换不同生成方式,比如直接展示在 标签中:
bash 复制代码
QRCode.toDataURL("your text").then((url) => {
  this.imageSrc = url;
});
相关推荐
Python×CATIA工业智造2 小时前
Frida RPC高级应用:动态模拟执行Android so文件实战指南
开发语言·python·pycharm
我叫小白菜3 小时前
【Java_EE】单例模式、阻塞队列、线程池、定时器
java·开发语言
狐凄3 小时前
Python实例题:基于 Python 的简单聊天机器人
开发语言·python
weixin_446122464 小时前
JAVA内存区域划分
java·开发语言·redis
小小小小宇4 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊4 小时前
Python之--基本知识
开发语言·前端·python
QuantumStack5 小时前
【C++ 真题】P1104 生日
开发语言·c++·算法
安全系统学习5 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
whoarethenext5 小时前
使用 C++/OpenCV 和 MFCC 构建双重认证智能门禁系统
开发语言·c++·opencv·mfcc
涛哥码咖5 小时前
chrome安装AXURE插件后无效
前端·chrome·axure