На складах, в интернет-магазинах и системах учёта активов постоянно требуется печатать этикетки. Ручное заполнение — ошибки и время. Мы реализовали генератор штрих-кодов для клиента из логистики: нужно было печатать 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 Code | Маркировка «Честный знак» | Любые данные |
Для розничной торговли — EAN-13 или UPC-A (Северная Америка). Для складов — Code128, он вмещает любые символы. Если нужна маркировка «Честный знак» — QR или DataMatrix. Подробнее о стандарте Code 128. Мы поможем определиться с форматом на старте проекта.
Почему стоит использовать клиентскую генерацию?
Серверная генерация нагружает CPU и добавляет задержку. Клиентская — нулевой TTFB, штрих-код отрисовывается в браузере за миллисекунды. JsBarcode в 3 раза легче bwip-js и в 5 раз быстрее генерирует штрих-коды на клиенте. Для 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('ru-RU')} ₽</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 дней в зависимости от сложности (один формат или несколько, клиентская/серверная печать). Стоимость рассчитывается индивидуально — свяжитесь с нами для оценки. Мы гарантируем, что этикетки будут сканироваться с первого раза. 5+ лет опыта в разработке, более 50 проектов в сфере логистики и ритейла.
Экономия на печати для типового склада с 10 сотрудниками превышает 20 000 рублей в месяц. Для получения консультации и предварительной оценки заполните форму на сайте.