安裝
使用您偏好的套件管理器安裝熱門的 JavaScript QR碼函式庫。
npm install qrcodeyarn add qrcodenpm install qr-code-styling使用 JavaScript 函式庫產生 QR碼
以下是使用熱門 JavaScript QR碼函式庫在專案中產生 QR碼的程式碼範例。
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 中產生 QR碼
使用 QRCode.fun API 從您的 JavaScript 應用程式產生帶有自訂顏色、形狀和標誌的樣式化 QR碼。
// 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)即時 QR碼預覽
立即嘗試使用 JavaScript 產生 QR碼。
原生函式庫 vs API
比較直接使用 JavaScript QR碼函式庫與 QRCode.fun API。
| 功能 | 原生函式庫 | QRCode.fun API |
|---|---|---|
| 設定複雜度 | 安裝套件、設定打包工具 | 單次 HTTP 請求 |
| 自訂 | 因函式庫而異 | 完整樣式：顏色、形狀、標誌 |
| 離線支援 | 是 | 需要網路 |
| 維護 | 手動更新相依套件 | 始終保持最新 |
| 輸出格式 | PNG, SVG（取決於函式庫） | PNG, SVG |
JavaScript QR碼使用情境
JavaScript 開發者產生 QR碼的常見情境。
Web 應用程式
在 React、Vue、Angular 或原生 JS Web 應用中動態產生 QR碼，用於分享連結、付款或身份驗證。
Node.js 後端
在伺服器端建立 QR碼，用於發票、票券、物流標籤和自動郵件附件。
漸進式 Web 應用
為 PWA 加入 QR碼產生功能，實現支援離線的行動體驗和可掃描的 QR碼。
瀏覽器擴充功能
建構 Chrome 或 Firefox 擴充功能，為目前頁面網址或選取的文字產生 QR碼。
JavaScript QR碼生態系統深入解析
JavaScript 擁有所有語言中最豐富的 QR碼生態系統，涵蓋瀏覽器、伺服器和混合環境。
React、Vue 和 Angular 整合
現代前端框架各有專用的 QR碼封裝元件。react-qr-code 提供了宣告式的 React 元件，支援 SVG 渲染。vue-qrcode 提供了支援響應式資料綁定的 Vue 3 可組合函式。對於 Angular，angularx-qrcode 將 QR碼產生封裝在指令中。
伺服器端渲染（SSR）與 Next.js
使用 Next.js、Nuxt 或其他 SSR 框架時，QR碼產生可以在伺服器端渲染時完成，也可以在客戶端 hydration 後完成。伺服器端產生會產生靜態 SVG 字串，非常適合 SEO。客戶端產生則支援互動式自訂。
npm 生態系統與套件大小考量
JavaScript QR碼生態系統提供了不同套件大小權衡的函式庫。qrcode 約 33KB，qr-code-styling 約 65KB，qrcode-generator 不到 10KB。請根據您的套件大小預算進行選擇。
常見問題
關於使用 JavaScript 產生 QR碼的常見問題。