安装
使用您喜欢的包管理器安装流行的 JavaScript 二维码库。
npm install qrcodeyarn add qrcodenpm install qr-code-styling使用 JavaScript 库生成二维码
以下是使用流行的 JavaScript 二维码库在项目中生成二维码的代码示例。
Basic QR Code (Node.js)
const QRCode = require('qrcode')
// Generate QR code as data URL
const dataUrl = await QRCode.toDataURL('https://qrcode.fun')
console.log(dataUrl)
// Generate QR code as file
await QRCode.toFile('./qrcode.png', 'https://qrcode.fun', {
width: 300,
margin: 2,
color: {
dark: '#1A2B3C',
light: '#FFFFFF'
}
})Browser Canvas Rendering
import QRCode from 'qrcode'
const canvas = document.getElementById('canvas')
await QRCode.toCanvas(canvas, 'https://qrcode.fun', {
width: 256,
margin: 2,
color: {
dark: '#1A2B3C',
light: '#FFFFFF'
}
})Styled QR Code with Logo
import QRCodeStyling from 'qr-code-styling'
const qrCode = new QRCodeStyling({
width: 300,
height: 300,
data: 'https://qrcode.fun',
image: '/logo.png',
dotsOptions: {
color: '#1A2B3C',
type: 'rounded'
},
cornersSquareOptions: {
color: '#8564C3',
type: 'extra-rounded'
},
backgroundOptions: {
color: '#FFFFFF'
}
})
qrCode.append(document.getElementById('qr-container'))
qrCode.download({ extension: 'png' })通过 API 在 JavaScript 中生成二维码
使用 QRCode.fun API 从您的 JavaScript 应用程序生成带有自定义颜色、形状和徽标的样式化二维码。
// Using fetch (Browser or Node.js 18+)
const response = await fetch('https://qrcode.fun/api/generate-qr-styled', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
data: 'https://qrcode.fun',
width: 300,
height: 300,
type: 'png',
margin: 10,
dotsOptions: {
color: '#1A2B3C',
type: 'rounded'
},
cornersSquareOptions: {
color: '#8564C3',
type: 'extra-rounded'
},
backgroundOptions: {
color: '#FFFFFF'
}
})
})
const result = await response.json()
// result.data contains the base64 PNG data URL
console.log(result.data)实时二维码预览
立即尝试使用 JavaScript 生成二维码。
原生库 vs API
比较直接使用 JavaScript 二维码库与 QRCode.fun API。
| 功能 | 原生库 | QRCode.fun API |
|---|---|---|
| 设置复杂度 | 安装包、配置打包工具 | 单次 HTTP 请求 |
| 自定义 | 因库而异 | 完整样式：颜色、形状、徽标 |
| 离线支持 | 是 | 需要互联网 |
| 维护 | 手动更新依赖 | 始终保持最新 |
| 输出格式 | PNG, SVG（取决于库） | PNG, SVG |
JavaScript 二维码使用场景
JavaScript 开发者生成二维码的常见场景。
Web 应用程序
在 React、Vue、Angular 或原生 JS Web 应用中动态生成二维码，用于分享链接、支付或身份验证。
Node.js 后端
在服务端创建二维码，用于发票、票据、物流标签和自动邮件附件。
渐进式 Web 应用
为 PWA 添加二维码生成功能，实现支持离线的移动体验和可扫描的二维码。
浏览器扩展
构建 Chrome 或 Firefox 扩展，为当前页面网址或选中文本生成二维码。
JavaScript 二维码生态系统深入解析
JavaScript 拥有所有语言中最丰富的二维码生态系统，涵盖浏览器、服务器和混合环境。
React、Vue 和 Angular 集成
现代前端框架各有专用的二维码封装组件。react-qr-code 提供了声明式的 React 组件，支持 SVG 渲染。vue-qrcode 提供了支持响应式数据绑定的 Vue 3 可组合函数。对于 Angular，angularx-qrcode 将二维码生成封装在指令中。
服务端渲染（SSR）与 Next.js
使用 Next.js、Nuxt 或其他 SSR 框架时，二维码生成可以在服务端渲染时完成，也可以在客户端 hydration 后完成。服务端生成会产生静态 SVG 字符串，非常适合 SEO。客户端生成则支持交互式自定义。
npm 生态系统与包体积考量
JavaScript 二维码生态系统提供了不同包体积权衡的库。qrcode 约 33KB，qr-code-styling 约 65KB，qrcode-generator 不到 10KB。请根据您的包体积预算进行选择。
常见问题
关于使用 JavaScript 生成二维码的常见问题。