TypeScript QR码生成器：qrcode.js 和 qrcode-generator

TypeScript QR码生成器：qrcode.js 和 qrcode-generator

QR码已成为现代网络不可或缺的一部分：从网站链接和Wi-Fi密码到联系信息和支付详情。在TypeScript生态系统中，有多个成熟的库可以在客户端（浏览器）和服务器端（Node.js）生成QR码。本文将详细介绍两个最流行的库：qrcode (qrcode.js) 和 qrcode-generator，并展示如何将它们集成到TypeScript项目中。

1. qrcode (qrcode.js) — 通用库

qrcode 库（npm包：qrcode）是生成QR码的事实标准。它支持将结果输出为canvas、SVG、Data URI字符串或纯文本。得益于TypeScript类型定义（内置类型或 @types/qrcode），开发变得安全且便捷。

安装

npm install qrcodenpm install --save-dev @types/qrcode  # 用于TypeScript

基础示例：在canvas中生成QR码（浏览器）

import QRCode from 'qrcode';

const canvas = document.getElementById('qr-canvas') as HTMLCanvasElement;

QRCode.toCanvas(canvas, 'https://pythonlib.ru', { width: 300 }, (error) => {  if (error) console.error('生成错误:', error);  else console.log('QR码已创建！');});

生成SVG（用于服务器端渲染）

import QRCode from 'qrcode';

const svgString = await QRCode.toString('https://pythonlib.ru', {  type: 'svg',  color: { dark: '#1a1a2e', light: '#eaeaea' }});console.log(svgString); // 准备好的SVG代码

配置参数

• width — QR码的宽度（像素），默认256。
• margin — 边缘空白（模块数），默认4。
• color.dark / color.light — 模块和背景颜色。
• errorCorrectionLevel — 纠错级别：'L' (7%), 'M' (15%), 'Q' (25%), 'H' (30%)。
• type — 输出格式：'png', 'svg', 'utf8'。

2. qrcode-generator — 轻量级替代方案

qrcode-generator 库（npm包：qrcode-generator）提供极简的API，且无依赖。如果您只需要获取QR码矩阵或以自定义格式生成它，该库是理想选择。

安装

npm install qrcode-generator

示例：创建并绘制到canvas

import QRCode from 'qrcode-generator';

const qr = QRCode(0, 'M'); // 类型（0 = 自动）和纠错级别qr.addData('https://pythonlib.ru');qr.make();

const canvas = document.getElementById('qr-canvas') as HTMLCanvasElement;const ctx = canvas.getContext('2d')!;const size = qr.getModuleCount();const cellSize = 10;canvas.width = size * cellSize;canvas.height = size * cellSize;

for (let row = 0; row < size; row++) {  for (let col = 0; col < size; col++) {    ctx.fillStyle = qr.isDark(row, col) ? '#000' : '#fff';    ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);  }}

获取文本表示（用于调试）

const qr = QRCode(0, 'M');qr.addData('Hello TypeScript!');qr.make();console.log(qr.createASCII()); // 在控制台输出字符形式的QR码

3. 库对比

图书馆中也有

Node.js 机器学习：JavaScript 库概述与示例 Java中的PDF生成：iText、Apache PDFBox、OpenPDF库概述 Air for Go：完整指南及示例 Rust的HTTP客户端：顶级请求处理库 在 TypeScript 中处理 Excel：库、工具和代码示例

推荐

Go (Golang) 中的日期处理：解析、格式化与操作库概览

Kotlin 中的任务队列：Coroutines、Flow 及后台处理库

TypeScript中的GraphQL：类型安全API的库

Spatie PHP 包：完整指南及示例