syncfusion-react-barcode

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion React Barcode

在React中实现Syncfusion条形码功能

When to Use This Skill

何时使用该技能

Use this skill when you need to:

Generate barcodes (Code39, Code128, Code11, Code32, Code93, Codabar) in React
Create QR codes for URLs, contact info, or product identification
Generate Data Matrix codes for labels, tracking, or inventory
Customize barcode appearance (size, color, text display)
Export barcodes as images (JPG, PNG) or base64 strings
Integrate barcode generation into forms, reports, or applications

当你需要以下功能时可使用本技能：

在React中生成条形码（Code39、Code128、Code11、Code32、Code93、Codabar）
为URL、联系信息或产品标识创建QR码
生成用于标签、追踪或库存管理的Data Matrix码
自定义条形码外观（尺寸、颜色、文本显示）
将条形码导出为图片（JPG、PNG）或base64字符串
在表单、报表或应用中集成条形码生成功能

Library Overview: Three Generator Types

库概览：三种生成器类型

Syncfusion React Barcode provides three main components:

BarcodeGeneratorComponent - Traditional 1D barcodes (Code39, Code128, etc.)
- Character encoding varies by type
- Ideal for: Product codes, inventory, retail
- Readability: High, works with basic scanners
QRCodeGeneratorComponent - 2D Quick Response codes
- Versions 1-40 with automatic scaling
- Ideal for: URLs, contact info, product links, advertising
- Capacity: Up to thousands of characters
DataMatrixGeneratorComponent - 2D Data Matrix codes
- Square/rectangular format, compact size
- Ideal for: Labels, parts tracking, aerospace/automotive
- Capacity: Alphanumeric data, efficient encoding

Syncfusion React Barcode提供三个核心组件：

BarcodeGeneratorComponent - 传统一维条形码（Code39、Code128等）
- 字符编码因类型而异
- 适用场景：产品编码、库存管理、零售行业
- 可读性：高，兼容基础扫码设备
QRCodeGeneratorComponent - 二维快速响应码（QR码）
- 支持1-40版本，自动缩放
- 适用场景：URL链接、联系信息、产品跳转链接、广告推广
- 容量：可容纳数千个字符
DataMatrixGeneratorComponent - 二维Data Matrix码
- 方形/矩形格式，体积紧凑
- 适用场景：标签、部件追踪、航空航天/汽车行业
- 容量：支持字母数字数据，编码效率高

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation and dependencies
Vite/React setup
Component imports and basic structure
Parent component initialization

📄 参考文档： references/getting-started.md

安装与依赖配置
Vite/React项目搭建
组件导入与基础结构
父组件初始化

Barcode Generator Types

条形码生成器类型

📄 Read: references/barcode-generator.md

Code39, Code39Extended, Code11, Code128, Code32, Code93, Codabar
When to use each type
Character set support per type
Encoding and checksum information
Implementation examples for each

📄 参考文档： references/barcode-generator.md

Code39、Code39Extended、Code11、Code128、Code32、Code93、Codabar
各类型的适用场景
每种类型支持的字符集
编码与校验和相关信息
各类型的实现示例

QR Code Generator

QR码生成器

📄 Read: references/qr-code-generator.md

QR Code basics and versions
Automatic version selection
Character encoding (numeric, alphanumeric, JIS8)
Common use cases and patterns
Implementation with different data types

📄 参考文档： references/qr-code-generator.md

QR码基础与版本介绍
自动版本选择
字符编码（数字、字母数字、JIS8）
常见使用场景与模式
不同数据类型的实现方式

Data Matrix Generator

Data Matrix生成器

📄 Read: references/data-matrix-generator.md

Data Matrix basics and structure
Encoding rules and character support
Size and capacity considerations
Label and printing applications
Comparison with other barcode types

📄 参考文档： references/data-matrix-generator.md

Data Matrix基础与结构
编码规则与字符支持
尺寸与容量考量
标签与打印应用
与其他条形码类型的对比

Customization and Styling

自定义与样式设置

📄 Read: references/customization.md

Barcode dimensions (width, height)
Colors (foreColor, backgroundColor)
Display text customization
Examples of size and color variations
Responsive design patterns

📄 参考文档： references/customization.md

条形码尺寸（宽度、高度）
颜色设置（前景色、背景色）
显示文本自定义
尺寸与颜色调整示例
响应式设计模式

Export and Integration

导出与集成

📄 Read: references/export-and-integration.md

Export as image (JPG, PNG)
Export as base64 string
Method: exportImage(filename, format)
Method: exportAsBase64Image(format)
Integration with forms, APIs, and reports

📄 参考文档： references/export-and-integration.md

导出为图片（JPG、PNG）
导出为base64字符串
方法：exportImage(filename, format)
方法：exportAsBase64Image(format)
与表单、API和报表的集成

Quick Start Examples

快速入门示例

Code39 Barcode

Code39条形码

tsx

import React from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function App() {
  return (
    <BarcodeGeneratorComponent
      id="barcode"
      type="Code39"
      value="SYNCFUSION"
      width="200px"
      height="150px"
    />
  );
}

tsx

import React from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function App() {
  return (
    <BarcodeGeneratorComponent
      id="barcode"
      type="Code39"
      value="SYNCFUSION"
      width="200px"
      height="150px"
    />
  );
}

QR Code

QR码

tsx

import React from 'react';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function App() {
  return (
    <QRCodeGeneratorComponent
      id="qrcode"
      value="https://www.syncfusion.com"
      width="200px"
      height="200px"
    />
  );
}

tsx

import React from 'react';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function App() {
  return (
    <QRCodeGeneratorComponent
      id="qrcode"
      value="https://www.syncfusion.com"
      width="200px"
      height="200px"
    />
  );
}

Data Matrix

Data Matrix码

tsx

import React from 'react';
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function App() {
  return (
    <DataMatrixGeneratorComponent
      id="datamatrix"
      value="Syncfusion"
      width="200px"
      height="200px"
    />
  );
}

tsx

import React from 'react';
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function App() {
  return (
    <DataMatrixGeneratorComponent
      id="datamatrix"
      value="Syncfusion"
      width="200px"
      height="200px"
    />
  );
}

Common Patterns

常见实现模式

Pattern 1: Dynamic Value Generation

模式1：动态值生成

tsx

const [barcodeValue, setBarcodeValue] = React.useState('DEFAULT123');

<BarcodeGeneratorComponent
  type="Code128"
  value={barcodeValue}
  width="200px"
  height="150px"
/>

tsx

const [barcodeValue, setBarcodeValue] = React.useState('DEFAULT123');

<BarcodeGeneratorComponent
  type="Code128"
  value={barcodeValue}
  width="200px"
  height="150px"
/>

Pattern 2: Export on Button Click

模式2：点击按钮导出

tsx

const barcodeRef = React.useRef();

const handleExport = () => {
  barcodeRef.current.exportImage('barcode', 'PNG');
};

<div>
  <BarcodeGeneratorComponent
    ref={barcodeRef}
    type="Code39"
    value="SYNC123"
    width="200px"
    height="150px"
  />
  <button onClick={handleExport}>Download Barcode</button>
</div>

tsx

const barcodeRef = React.useRef();

const handleExport = () => {
  barcodeRef.current.exportImage('barcode', 'PNG');
};

<div>
  <BarcodeGeneratorComponent
    ref={barcodeRef}
    type="Code39"
    value="SYNC123"
    width="200px"
    height="150px"
  />
  <button onClick={handleExport}>下载条形码</button>
</div>

Pattern 3: Styled Container

模式3：样式化容器

tsx

<div style={{ padding: '20px', border: '1px solid #ddd' }}>
  <QRCodeGeneratorComponent
    value="https://example.com"
    width="250px"
    height="250px"
    foreColor="#333"
    backgroundColor="#fff"
  />
</div>

tsx

<div style={{ padding: '20px', border: '1px solid #ddd' }}>
  <QRCodeGeneratorComponent
    value="https://example.com"
    width="250px"
    height="250px"
    foreColor="#333"
    backgroundColor="#fff"
  />
</div>

Key Props

核心属性

Prop	Description	Used By
`type`	Barcode type (Code39, Code128, Code11, Code32, Code93, Codabar)	BarcodeGeneratorComponent
`value`	Data to encode	All generators
`width`	Barcode width (string with px)	All generators
`height`	Barcode height (string with px)	All generators
`foreColor`	Dark/bar color	All generators
`backgroundColor`	Light/space color	All generators
`displayText`	Object to customize display text	All generators
`id`	Unique component identifier (required for export)	All generators

属性	描述	适用组件
`type`	条形码类型（Code39、Code128、Code11、Code32、Code93、Codabar）	BarcodeGeneratorComponent
`value`	待编码的数据	所有生成器组件
`width`	条形码宽度（带px单位的字符串）	所有生成器组件
`height`	条形码高度（带px单位的字符串）	所有生成器组件
`foreColor`	条码深色部分颜色	所有生成器组件
`backgroundColor`	条码空白区域颜色	所有生成器组件
`displayText`	用于自定义显示文本的对象	所有生成器组件
`id`	组件唯一标识（导出功能必填）	所有生成器组件

Common Use Cases

常见使用场景

Retail & Inventory: Code128 barcodes for products and SKUs
E-commerce: QR codes linking to product pages or reviews
Logistics: Data Matrix for package tracking and labels
Document Management: QR codes embedding document metadata
Marketing: Dynamic QR codes with analytics
Healthcare: Code128/Code39 for specimen/patient labeling
Form Workflows: Export barcodes for printing or archival

零售与库存管理：为产品和SKU使用Code128条形码
电商行业：QR码跳转至产品页面或评价页
物流行业：Data Matrix码用于包裹追踪和标签
文档管理：QR码嵌入文档元数据
营销推广：带分析功能的动态QR码
医疗行业：Code128/Code39用于样本/患者标签
表单流程：导出条形码用于打印或归档

Next Steps

后续步骤

Choose your generator type based on use case
Read the getting started guide
Review the specific generator documentation
Customize appearance as needed
Implement export if required for your workflow

根据使用场景选择生成器类型
阅读快速入门指南
查看对应生成器的详细文档
根据需求自定义外观
若需导出功能则实现对应逻辑