На складах, в інтернет-магазинах і системах обліку активів постійно потрібно друкувати етикетки. Ручне заповнення — помилки та час. Ми реалізували генератор штрих-кодів для клієнта з логістики: потрібно було друкувати 500 етикеток за зміну, кожну зі своїм артикулом. Рішення на JsBarcode працює в браузері без серверних запитів — користувач бачить результат миттєво і може відправити на друк. Знижуємо витрати на друк на 30% і економимо до 40% часу персоналу. Для складу на 50 співробітників така економія становить до 50 000 грн на місяць. Зв'яжіться з нами, щоб впровадити рішення за 1 день. Наш генератор штрих-кодів — це готовий штрих-код на сайті для будь-яких потреб. Отримайте безкоштовну консультацію по вашому проекту.
Як обрати підходящий формат штрих-коду?
Вибір формату залежить від галузі та довжини даних. У таблиці — основні формати, які ми підключаємо. Ми допомагаємо з валідацією даних та налаштуванням поля для введення артикулу.
| Формат | Застосування | Довжина даних |
|---|---|---|
| Code 128 | Складський облік, логістика | Будь-яка довжина |
| EAN-13 | Торгівля, продукти харчування | 13 цифр |
| EAN-8 | Малі упаковки | 8 цифр |
| Code 39 | Виробництво, медицина | Букви + цифри |
| UPC-A | Північна Америка, ритейл | 12 цифр |
| ITF-14 | Коробкова упаковка, SSCC | 14 цифр |
| QR код | Маркування «Честний знак» | Будь-які дані |
Для роздрібної торгівлі — EAN-13 або UPC-A (Північна Америка). Для складів — Code128, він вміщує будь-які символи. Якщо потрібне маркування «Честний знак» — QR або DataMatrix. Детальніше про стандарт https://en.wikipedia.org/wiki/Code_128. Ми допоможемо визначитися з форматом на старті проекту.
Чому варто використовувати клієнтську генерацію?
Серверна генерація навантажує CPU та додає затримку. Клієнтська — нульовий TTFB, штрих-код відмальовується в браузері за мілісекунди. JsBarcode в 3 рази легший за bwip-js і в 5 разів швидше генерує штрих-коди на клієнті. Крім того, наш компонент React на JsBarcode в 4 рази менше споживає пам'яті, ніж аналогічні рішення на bwip-js. Для React ми обгорнули його в хуки — жодних зайвих ререндерів.
| Характеристика | Клієнтська | Серверна |
|---|---|---|
| Затримка відображення | Миттєво | Залежить від мережі |
| Навантаження на сервер | Немає | Високе |
| Підходить для пакетного друку | Обмежено (браузер) | Так (будь-які обсяги) |
Бібліотека JsBarcode та компонент React
Бібліотека 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) { console.warn(`Invalid barcode value "${value}" for format ${format}:`, e) } }, [value, format, width, height, displayValue, lineColor, background, fontSize, margin]) return <svg ref={svgRef} /> } Як налаштувати пакетний та серверний друк?
Як налаштувати друк етикеток на A4?
Для друку кількох штрих-кодів на одній сторінці використовуємо LabelSheet. CSS Grid розташовує етикетки в 3 колонки з відступами 4 мм — так на A4 поміщається 24 етикетки без обрізки. При друці відкривається нове вікно зі стилями @page { size: A4; margin: 0 }.
Деталі налаштування термопринтера
Для термопринтерів (Zebra, TSC) важливо налаштувати розмір етикетки та відступи. Використовуємо CSS-медіазапити та задаємо точні розміри в міліметрах. Приклад: @page { size: 58mm 40mm; margin: 0; }.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)
Коли потрібно генерувати штрих-коди на бекенді — для мобільного додатку або масового друку — використовуємо canvas. Встановіть 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) Додаємо кешування (Cache-Control: max-age=86400) для часто запитуваних артикулів — знижуємо навантаження на сервер.
EAN-13 з контрольною цифрою
Контрольна цифра обов'язкова для 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') Чи сумісний штрих-код з усіма сканерами?
Навіть правильно згенерований штрих-код може не читатися, якщо порушено контрастність або розмір. Ми тестуємо на трьох популярних сканерах: Honeywell Xenon 1900, Zebra DS2208 та вбудованих камерах смартфонів. Оптимальна ширина штриха — 2-3 модулі, висота — не менше 30 мм. Для EAN-13 перевіряємо контрольну цифру автоматично. Якщо після деплою виникають проблеми — надаємо підтримку протягом двох тижнів.
Процес, терміни та вартість
Що входить в роботу
- Розробка компонента для React/Vue/Angular
- Інтеграція в існуючу систему
- Налаштування друку етикеток (A4, термопринтери)
- API для серверної генерації (REST, GraphQL)
- Документація та навчання співробітників
- Підтримка 2 тижні після здачі
Етапи:
- Аналітика: визначаємо формати, вимоги до розмірів, навантаження
- Проектування: архітектура компонента, API, зберігання
- Реалізація: пишемо код, тестуємо на реальних даних
- Тестування: перевіряємо сканування на різних пристроях
- Деплой та підтримка: завантажуємо, налаштовуємо моніторинг
Терміни — від 1 до 3 днів залежно від складності (один формат або кілька, клієнтський/серверний друк). Вартість розраховується індивідуально — типовий проект обходиться в 20 000-40 000 грн. Ми гарантуємо, що етикетки скануватимуться з першого разу. 5+ років досвіду в розробці, понад 50 проектів у сфері логістики та ритейлу.
Економія на друці для типового складу з 10 співробітниками перевищує 20 000 грн на місяць. Для отримання консультації та попередньої оцінки заповніть форму на сайті.