前端qrcode库安装与Vue2/Vue3二维码生成实战

前言

qrcode 是一个基于JavaScript的二维码生成库，主要通过获取 DOM 标签，并利用 HTML5 Canvas 进行绘制，该库不依赖任何第三方库。

官方文档地址：https://www.npmjs.com/package/qrcode

1、浏览器支持

qrcode 理论上兼容所有现代浏览器及部分旧版浏览器。只要浏览器支持 HTML5 Canvas 和/或 DOM 操作，即可使用 qrcode 生成二维码。具体支持的浏览器包括：IE6~10、Chrome、Firefox、Safari、Mobile Safari、Opera、Android、Windows Mobile 以及 Microsoft Edge 等。

2、优点

1）客户端实时生成：无需服务器介入，直接在浏览器端生成二维码，有效降低服务器负载和网络传输成本，便于动态内容（如根据用户输入或当前页面 URL）生成二维码。

2）轻量级：qrcode.js 是一个体积小巧的库，易于引入项目，不会显著增加网页加载时间。

3）易用性：API 设计简洁，仅需几行代码即可将文本转换为二维码，并可灵活控制生成参数（如纠错级别、尺寸等）。

4）跨平台兼容性：基于 HTML5 Canvas 或 DOM 元素绘制，适用于大多数现代浏览器，涵盖桌面端和移动端。

5）动态更新：由于在客户端生成，可实现动态内容的实时更新，例如在网页上显示随数据变化而更新的二维码。

6）无额外图片资源：无需上传或存储预生成的二维码图片，减少了文件存储空间的需求和维护工作。

7）可嵌入 Web 应用：与网站其他功能集成紧密，可方便地将生成的二维码嵌入网页任意位置，提升用户体验。

8）自定义扩展：虽然原始库可能不支持某些高级特性（如添加 Logo），但作为开源项目，开发者可根据需求修改和扩展源码以满足个性化要求。

3、缺点

1）不支持中文直接编码：据信息提及，原始版本的 jquery.qrcode 插件可能无法直接将包含中文的文本转换为二维码。处理非 ASCII 字符时，需先对中文内容进行 URL 编码或其他转码操作。

若尝试用中文生成二维码并用微信扫描，可能会看到如下提示：

2）LOGO 添加功能缺失：该插件本身未提供将 Logo 图像集成到二维码中心的功能。如需带 Logo 的二维码，需额外开发或寻找支持此功能的库。

3）兼容性问题：不同浏览器间可能存在兼容性差异，例如在较老版本的 IE 浏览器（如 IE7/8）中生成的二维码图片尺寸可能与现代浏览器（如 Chrome、Firefox 等）显示不同，可能需要开发者针对特定环境进行特殊处理。

4）尺寸和分辨率限制：对于较大数据量或更高级别的纠错级别，生成的二维码可能变得很大。由于基于 HTML5 Canvas 或 DOM 元素绘制，可能受限于设备屏幕大小或渲染能力，导致部分区域无法完整显示。

5）性能优化不足：在某些低性能设备上，特别是在大量生成或频繁更新二维码的情况下，JS 实时生成的效率可能低于服务器端生成并返回静态图片的方式。

6）功能相对基础：相比于一些更全面的库，qrcode 提供的功能较为基础，例如缺乏高级定制选项，如颜色自定义、样式美化等。

4、相关方法

关于 API 的详细使用方法和 Option 配置项，可参考：https://www.npmjs.com/package/qrcode#api

浏览器端

1）create(text, [options])，创建二维码并返回一个 qrcode 对象。

2）toCanvas(text, [options], [cb(error, canvas)])，将二维码绘制到画布上。

3）toDataURL(canvasElement, text, [options], [cb(error, url)])，返回一个数据 URI，其中包含二维码图像的格式，该方法同样使用 Canvas 作为画布来生成数据 URI。

4）toString(text, [options], [cb(error, string)])，返回二维码的字符串格式。

服务端

包含上述 4 个方法，此外还多出以下 2 个方法：

5）toFile(path, text, [options], [cb(error)])，将二维码保存为文件。若未指定 options.type，将从文件扩展名猜测格式，可识别的扩展名包括 png、 svg、 txt。

6）toFileStream(stream, text, [options])，将二维码图像转换为文件流，目前仅支持 png 格式。

5、安装及使用示例

在 Vue 项目中使用，首先执行安装命令：npm install --save qrcode

// vue2项目使用示例
<template>
  <div>
     <el-button type="primary" @click="handleGetQRCode">
        vue2中获取qrcode生成的二维码
     </el-button>
     <div>
        <canvas id="QRCode"></canvas>
     </div>
	<div>
</template>

<script>
import QRCode from "qrcode";

export default {
  data() {
    return {
      qrcode: ""
    };
  },
  methods: {
    async handleGetQRCode() {
      const element = document.getElementById("QRCode");
      const url = "https://blog.csdn.net/ganyingxie123456";
      QRCode.toCanvas(element, url);
    }
  }
};

结果：

// vue3项目使用示例
<template>
  <a-button type="primary" @click="handleGetQRCode">
    vue3获取qrcode生成的二维码-简单版
  </a-button>
  <div class="qrcode">
    <img :src="qrcode" />
  </div>

  <a-button type="primary" @click="handleGetQRCode2">
    qrcode生成的二维码-增加配置版
  </a-button>
  <div class="qrcode">
    <img :src="qrcode2" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import QRCode from "qrcode";

const url = "https://blog.csdn.net/ganyingxie123456";

const qrcode = ref("");
const handleGetQRCode = async () => {
  qrcode.value = await QRCode.toDataURL(url);
};

const qrcode2 = ref("");
const handleGetQRCode2 = () => {
  const option = {
    errorCorrectionLevel: "H", // 可选，容错级别，值有 L（低）、M（中）、Q（高）、H（最高），默认为H
    type: "image/jpeg", 	// 可选，生成的二维码类型
    quality: 0.3, 			// 可选，二维码质量
    margin: 5, 				// 可选，二维码留白边距1
    color: {
      dark: "#0A7AFF", 	// 可选，前景色，格式必须是十六进制的，如果不是则会报错，比如：blue或rgb(255,245,255)等
      light: "#F73128", // 可选，背景色，格式同上
    },
  };
  QRCode.toDataURL(url, option, (error: any, resultUrl: any) => {
    if (error) {
      throw error;
    }
    qrcode2.value = resultUrl;
  });
};
</script>

<style scoped>
.qrcode {
  width: 200px;
  height: 200px;
}
</style>

结果如下：

OK，至此结束～

到此这篇关于前端 qrcode 生成二维码安装及使用示例的文章就介绍到这了，更多相关前端 qrcode 生成二维码内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

前端qrcode生成二维码安装及使用示例详解

前言

1、浏览器支持

2、优点

3、缺点

4、相关方法

5、安装及使用示例

实用工具推荐