安裝
使用您偏好的套件管理器安裝熱門的 JavaScript QR碼函式庫。
npm
npm install qrcodeyarn
yarn add qrcodenpm (styled)
npm 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' })QRCode.fun API
透過 API 在 JavaScript 中產生 QR碼
使用 QRCode.fun API 從您的 JavaScript 應用程式產生帶有自訂顏色、形狀和標誌的樣式化 QR碼。
JavaScript API 整合
// 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碼。
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碼的常見問題。
最受歡迎的兩個選擇是 qrcode（輕量級，適合簡單 QR碼）和 qr-code-styling（進階自訂，支援顏色、形狀和標誌）。選擇 qrcode 追求簡潔，選擇 qr-code-styling 追求設計彈性。