Реалізація генератора штрих-кодів на сайті
Штрих-коди потрібні у складських системах (генерація етикеток), інтернет-магазинах (друк цінників), системах обліку активів та документообігу. Браузер генерує штрих-код клієнтськи без API-запитів — користувач одразу бачить результат і може його надрукувати.
Формати штрих-кодів
| Формат | Застосування | Довжина даних |
|---|---|---|
| Code 128 | Складський облік, логістика | Будь-яка довжина |
| EAN-13 | Торгівля, продукти харчування | 13 цифр |
| EAN-8 | Малі упаковки | 8 цифр |
| Code 39 | Виробництво, медицина | Букви + цифри |
| UPC-A | Північна Америка, ритейл | 12 цифр |
| ITF-14 | Коробкова упаковка, SSCC | 14 цифр |
| QR Code | Маркування «Чесний знак» | Будь-які дані |
Бібліотека JsBarcode
JsBarcode підтримує всі популярні формати, працює з <canvas>, <svg> та <img>.
npm install jsbarcode
npm install -D @types/jsbarcode
Компонент
import JsBarcode from 'jsbarcode'
import { useEffect, useRef } from 'react'
interface BarcodeProps {
value: string
format?: string
width?: number
height?: number
displayValue?: boolean
lineColor?: string
background?: string
fontSize?: number
margin?: number
}
export function Barcode({
value,
format = 'CODE128',
width = 2,
height = 80,
displayValue = true,
lineColor = '#000000',
background = '#ffffff',
fontSize = 14,
margin = 10,
}: BarcodeProps) {
const svgRef = useRef<SVGSVGElement>(null)
useEffect(() => {
if (!svgRef.current || !value) return
try {
JsBarcode(svgRef.current, value, {
format,
width,
height,
displayValue,
lineColor,
background,
fontSize,
margin,
textMargin: 4,
fontOptions: 'bold',
font: 'monospace',
})
} catch (e) {
// Невалідне значення для формату (наприклад, букви в EAN-13)
console.warn(`Invalid barcode value "${value}" for format ${format}:`, e)
}
}, [value, format, width, height, displayValue, lineColor, background, fontSize, margin])
return <svg ref={svgRef} />
}
Пакетна генерація етикеток
Для друку кількох штрих-кодів на одній сторінці:
function LabelSheet({ items }: { items: { sku: string; name: string; price: number }[] }) {
const printRef = useRef<HTMLDivElement>(null)
function handlePrint() {
const content = printRef.current!
const win = window.open('', '_blank')!
win.document.write(`
<html>
<head>
<title>Етикетки</title>
<style>
body { margin: 0; }
.sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; padding: 10mm; }
.label { border: 0.5pt solid #ccc; padding: 3mm; text-align: center; page-break-inside: avoid; }
.label-name { font-size: 9pt; margin-bottom: 2mm; overflow: hidden; white-space: nowrap; }
.label-price { font-size: 14pt; font-weight: bold; margin-top: 2mm; }
@media print { @page { size: A4; margin: 0; } }
</style>
</head>
<body>
<div class="sheet">${content.innerHTML}</div>
</body>
</html>
`)
win.document.close()
win.focus()
win.print()
win.close()
}
return (
<div>
<button onClick={handlePrint} className="mb-4 px-4 py-2 bg-blue-600 text-white rounded">
Друк етикеток
</button>
<div ref={printRef} className="grid grid-cols-3 gap-1">
{items.map((item) => (
<div key={item.sku} className="border p-2 text-center text-xs">
<div className="truncate text-xs">{item.name}</div>
<Barcode value={item.sku} format="CODE128" height={50} fontSize={10} margin={4} />
<div className="font-bold">{item.price.toLocaleString('uk-UA')} ₽</div>
</div>
))}
</div>
</div>
)
}
Серверна генерація (Node.js)
npm install jsbarcode canvas
import { createCanvas } from 'canvas'
import JsBarcode from 'jsbarcode'
export function generateBarcodeBuffer(value: string, format = 'CODE128'): Buffer {
const canvas = createCanvas(400, 150)
JsBarcode(canvas, value, {
format,
width: 2,
height: 80,
displayValue: true,
fontSize: 14,
margin: 10,
})
return canvas.toBuffer('image/png')
}
// В API route:
const buffer = generateBarcodeBuffer(req.query.sku)
res.setHeader('Content-Type', 'image/png')
res.send(buffer)
EAN-13 з контрольною цифрою
function calculateEAN13Checksum(digits: string): string {
if (digits.length !== 12) throw new Error('EAN-13 requires exactly 12 digits')
let sum = 0
for (let i = 0; i < 12; i++) {
sum += parseInt(digits[i]) * (i % 2 === 0 ? 1 : 3)
}
const checkDigit = (10 - (sum % 10)) % 10
return digits + checkDigit
}
// Генерація штрих-кодів з контрольною цифрою
const ean13 = calculateEAN13Checksum('460000000001')
// '4600000000015'
Що робимо
Підключаємо JsBarcode, реалізуємо компонент із потрібним форматом, налаштовуємо друк етикеток (CSS Print, правильні відступи для аркуша A4). При серверній генерації — API endpoint, що повертає PNG/SVG за артикулом.
Строк: 0.5–1 день.