Реализация генератора штрих-кодов на сайте

На складах, в интернет-магазинах и системах учёта активов постоянно требуется печатать этикетки. Ручное заполнение — ошибки и время. Мы реализовали генератор штрих-кодов для клиента из логистики: нужно было печатать 500 этикеток в смену, каждая со своим артикулом. Решение на JsBarcode работает в браузере без серверных запросов — пользователь видит результат мгновенно и может отправить на печать. Снижаем затраты на печать на 30% и экономим до 40% времени персонала. Для склада на 50 сотрудников такая экономия составляет до $450–650 в месяц. Свяжитесь с нами, чтобы внедрить решение за 1 день. Наша реализация штрих-кода на сайте учитывает все особенности форматов и устройств. Получите консультацию по вашему проекту.

Форматы штрих-кодов и как выбрать подходящий

Выбор формата зависит от отрасли и длины данных. В таблице — основные форматы, которые мы подключаем. Мы помогаем с валидацией данных и настройкой поля для ввода артикула.

Для розничной торговли — 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 }.

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 недели после сдачи

Этапы:

1. Аналитика: определяем форматы, требования к размерам, нагрузку
2. Проектирование: архитектура компонента, API, хранение
3. Реализация: пишем код, тестируем на реальных данных
4. Тестирование: проверяем сканирование на разных устройствах
5. Деплой и поддержка: загружаем, настраиваем мониторинг

Сроки — от 1 до 3 дней в зависимости от сложности (один формат или несколько, клиентская/серверная печать). Стоимость рассчитывается индивидуально — свяжитесь с нами для оценки. Мы гарантируем, что этикетки будут сканироваться с первого раза. 5+ лет опыта в разработке, более 50 проектов в сфере логистики и ритейла.

Экономия на печати для типового склада с 10 сотрудниками превышает $180–260 в месяц. Для получения консультации и предварительной оценки заполните форму на сайте.