使用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;
});
相关推荐
CodeWithMe8 分钟前
【C/C++】namespace + macro混用场景
c语言·开发语言·c++
不浪brown8 分钟前
开源!矢量建筑白模泛光特效以及全国77个大中城市的矢量shp数据获取!
前端·cesium
山有木兮木有枝_10 分钟前
JavaScript 数据类型与内存分配机制探究
前端
小小小小宇15 分钟前
前端 异步任务并发控制
前端
蓝婷儿16 分钟前
6个月Python学习计划 Day 17 - 继承、多态与魔术方法
开发语言·python·学习
bysking29 分钟前
【27-vue3】vue3版本的"指令式弹窗"逻辑函数createModal-bysking
前端·vue.js
LuckySusu30 分钟前
【HTML篇】script`标签中的 defer 与 async:深入解析异步加载 JavaScript 的差异
前端·html
CAD老兵31 分钟前
在 TypeScript 中复用已有 Interface 的部分属性:完整指南
前端
一头小鹿33 分钟前
【JS】原型和原型链 | 笔记整理
javascript
龚思凯35 分钟前
Vue 3 中 watch 监听引用类型的深度解析与全面实践
前端·vue.js