17370845950

最常用稳定方式是使用第三方库而非自研算法；qrcode.js最轻量无依赖，支持多端与多种导出格式；qr-code-generator适合深度控制场景；框架专用库如react-qr-code开箱即用；需注意中文编码、长度限制、高清屏适配及扫码失败等避坑点。

JavaScript 生成二维码，最常用、最稳定的方式是使用成熟的第三方库，而不是自己从零实现 QR 编码算法。目前社区主流的库轻量、易用、支持浏览器和 Node.js，并且能灵活控制样式、容错等级、导出格式（Canvas、SVG、Data URL 等）。

qrcode.js（推荐：简单直接，无依赖）

这是最轻量、最常用的纯 JS 二维码生成库，仅一个文件（qrcode.min.js），不依赖 jQuery 或其他框架，支持浏览器和 Node.js。

• 浏览器中直接用 引入，调用 QRCode.toCanvas() 或 QRCode.toDataURL() 即可生成
• Node.js 中通过 npm install qrcode 安装，支持生成 PNG、SVG、UTF8 字符串等格式
• 支持设置容错等级（L/M/Q/H）、宽高、边距（margin）、颜色（colorDark/colorLight）
• 示例：
  
  
  

qr-code-generator（适合需要深度控制或离线环境）

这是一个无依赖、纯算法实现的库（源自日本作者的 C 版本移植），代码清晰、体积小（约 15KB），适合嵌入式或对包大小敏感的场景。

• 不封装 DOM 操作，只负责生成二维码数据矩阵（二维数组），需自行渲染（比如用 Canvas 画点）
• 因此更灵活：可自定义像素绘制逻辑、适配 Retina 屏、叠加 logo、生成 ASCII 二维码等
• 支持所有标准 QR 版本（1–40）和四个容错等级，也支持 Kanji 模式
• 适合进阶需求，比如在小程序、Web Worker 或低配设备中运行

react-qr-code / vue-qrcode（框架专用，开箱即用）

如果你用 React 或 Vue，官方生态里有维护良好的组件封装，省去手动挂载和更新逻辑。

• react-qr-code：基于 SVG 渲染，响应式友好，支持动态 props 更新，无外部依赖
• vue-qrcode（Vue 2/3 均有对应版本）：支持 v-model 绑定、插槽自定义背景、内置下载按钮
• 二者都内置了错误处理（如空值、超长文本自动截断提示），适合业务项目快速集成

注意避坑的几个关键点

生成二维码不是“输字符串就完事”，实际开发中常遇到这些情况：

• 中文或特殊字符乱码：确保传入的文本已 UTF-8 编码（浏览器中一般自动处理，Node.js 中建议用 encodeURIComponent(str) 包裹再生成）
• 内容超长导致失败：QR 码容量有限（例如 Version 1 M 等级最多 70 字符）。可启用自动降级（降低容错）或提前校验长度
• 高清屏模糊：Canvas 渲染时未考虑 window.devicePixelRatio，需手动缩放 canvas 的 width/height 并用 CSS 缩放显示尺寸
• 扫码失败：避免背景色太浅（如纯白底+浅灰码）、模块过小（建议单模块 ≥ 4px）、或添加了遮挡 logo 但未预留足够 quiet zone（四周空白区应 ≥ 4 模块宽）