במחסנים, בחנויות מקוונות ובמערכות מעקב נכסים, יש צורך להדפיס תוויות באופן קבוע. הזנה ידנית מובילה לשגיאות ולבזבוז זמן. יישמנו מחולל ברקודים ללקוח לוגיסטי שנזקק להדפסת 500 תוויות במשמרת, כל אחת עם SKU ייחודי. הפתרון משתמש ב-JsBarcode הפועל בדפדפן ללא בקשות לשרת — המשתמשים רואים את התוצאה מיידית ויכולים לשלוח להדפסה. זה מקצץ את עלויות ההדפסה ב-30% וחוסך עד 40% מזמן הצוות. עבור מחסן עם 50 עובדים, זה מתורגם לחיסכון של עד 50,000 רובל בחודש. צרו קשר כדי ליישם פתרון ביום אחד. יישום הברקודים שלנו באתר כולל התחשבות בכל פרטי הפורמט והמכשירים. קבלו ייעוץ לפרויקט שלכם.
בחירת פורמט הברקוד המתאים
בחירת הפורמט תלויה בענף ובאורך הנתונים. הטבלה שלהלן מפרטת את הפורמטים העיקריים שאנו משלבים. אנו מסייעים באימות נתונים ובהגדרת שדות קלט.
| פורמט | יישום | אורך נתונים |
|---|---|---|
| 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. נעזור לכם להחליט על הפורמט בתחילת הפרויקט.
למה יצירה בצד הלקוח?
יצירה בצד השרת מעמיסה על המעבד ומוסיפה השהיה. יצירה בצד הלקוח פירושה אפס TTFB — הברקוד נוצר בדפדפן תוך מילישניות. JsBarcode קל פי 3 מ-bwip-js ומהיר פי 5 ליצירה בצד הלקוח. עבור React, אנו עוטפים אותו ב-hooks — ללא רינדורים מיותרים.
| מאפיין | צד הלקוח | צד השרת |
|---|---|---|
| השהיית תצוגה | מיידית | תלויה ברשת |
| עומס על השרת | אין | גבוה |
| הדפסה בכמות גדולה | מוגבלת (דפדפן) | כן (כל נפח) |
ספריית 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 מ"מ — 24 תוויות נכנסות על A4 ללא חיתוך. ההדפסה פותחת חלון חדש עם סגנונות npm install jsbarcode npm install -D @types/jsbarcode .
פרטי הגדרות מדפסת תרמית
עבור מדפסות תרמיות (Zebra, TSC), חשוב להגדיר גודל תווית ושוליים. אנו משתמשים ב-CSS media queries ומציינים מידות מדויקות במילימטרים. דוגמה: @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. התקינו את 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} /> } ו-@page { size: A4; margin: 0 }, ואז יישמו את הפונקציה:
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)אנו מוסיפים caching (Cache-Control: max-age=86400) עבור SKUs המבוקשים לעתים קרובות כדי להפחית את העומס על השרת.
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)
- תיעוד והדרכת צוות
- שבועיים של תמיכה לאחר הפריסה
שלבים:
- ניתוח: זיהוי פורמטים, דרישות גודל ועומס
- עיצוב: ארכיטקטורת רכיבים, API, אחסון
- יישום: כתיבת קוד, בדיקה עם נתונים אמיתיים
- בדיקות: אימות סריקה במכשירים שונים
- פריסה ותמיכה: העלאה, הגדרת ניטור
לוחות הזמנים נעים בין 1 ל-3 ימים בהתאם למורכבות (פורמט יחיד לעומת מרובה, הדפסה בצד הלקוח לעומת צד השרת). המחיר נקבע באופן אישי — צרו קשר להערכה. אנו מבטיחים שהתוויות ייסרקו בניסיון הראשון. ניסיון פיתוח של 5+ שנים, מעל 50 פרויקטים בלוגיסטיקה וקמעונאות.
החיסכון בהדפסה עבור מחסן טיפוסי עם 10 עובדים עולה על 20,000 רובל בחודש. לייעוץ והערכה ראשונית, צרו קשר.