使用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;
});
相关推荐
DES 仿真实践家4 分钟前
【Day 11-N22】Python类(3)——Python的继承性、多继承、方法重写
开发语言·笔记·python
Code Warrior1 小时前
【每日算法】专题五_位运算
开发语言·c++
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
沐知全栈开发3 小时前
HTML DOM 访问
开发语言
祝余呀3 小时前
html初学者第一天
前端·html
脑袋大大的4 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
二进制person5 小时前
Java SE--方法的使用
java·开发语言·算法
速易达网络6 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
OneQ6666 小时前
C++讲解---创建日期类
开发语言·c++·算法
耶啵奶膘6 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app