syncfusion-react-barcode

实现 Syncfusion React 条形码

何时使用此技能

在需要以下功能时使用此技能：

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

库概览：三种生成器类型

Syncfusion React Barcode 提供三个主要组件：

1. BarcodeGeneratorComponent — 传统的一维条形码（Code39、Code128 等）

   • 字符编码因类型而异
   • 适用于：产品代码、库存、零售
   • 可读性：高，可使用基础扫描器读取

2. QRCodeGeneratorComponent — 二维 Quick Response 码

   • 版本 1–40，自动缩放
   • 适用于：URL、联系信息、产品链接、广告
   • 容量：最多可容纳数千个字符

3. DataMatrixGeneratorComponent — 二维 Data Matrix 码

   • 方形或矩形格式，尺寸紧凑
   • 适用于：标签、零件跟踪、航空航天/汽车行业
   • 容量：支持字母数字数据，编码效率高

文档与导航指南

开始使用

📄 阅读： references/getting-started.md

• 安装和依赖项
• Vite/React 设置
• 组件导入和基本结构
• 父组件初始化

条形码生成器类型

📄 阅读： references/barcode-generator.md

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

QR 码生成器

📄 阅读： references/qr-code-generator.md

• QR 码基础知识和版本
• 自动选择版本
• 字符编码（数字、字母数字、JIS8）
• 常见用例和模式
• 使用不同数据类型进行实现

Data Matrix 生成器

📄 阅读： references/data-matrix-generator.md

• Data Matrix 基础知识和结构
• 编码规则和支持的字符
• 尺寸和容量方面的注意事项
• 标签和打印应用
• 与其他条形码类型的比较

自定义和样式设置

📄 阅读： references/customization.md

• 条形码尺寸（宽度、高度）
• 颜色（foreColor、backgroundColor）
• 自定义显示文本
• 尺寸和颜色变化示例
• 响应式设计模式

导出和集成

📄 阅读： references/export-and-integration.md

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

快速入门示例

Code39 条形码

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 码

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

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"
    />
  );
}

常见模式

模式 1：动态生成值

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

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

模式 2：点击按钮时导出

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>

模式 3：设置容器样式

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

关键属性

属性	说明	使用组件
type	条形码类型（Code39、Code128、Code11、Code32、Code93、Codabar）	BarcodeGeneratorComponent
value	要编码的数据	所有生成器
width	条形码宽度（带 px 的字符串）	所有生成器
height	条形码高度（带 px 的字符串）	所有生成器
foreColor	深色/条形颜色	所有生成器
backgroundColor	浅色/空白区域颜色	所有生成器
displayText	用于自定义显示文本的对象	所有生成器
id	唯一组件标识符（导出时必需）	所有生成器

常见用例

1. 零售与库存：使用 Code128 条码标记产品和 SKU
2. 电子商务：使用链接到产品页面或评价的 QR 码
3. 物流：使用 Data Matrix 码追踪包裹并制作标签
4. 文档管理：使用嵌入文档元数据的 QR 码
5. 营销：使用带分析功能的动态 QR 码
6. 医疗保健：使用 Code128/Code39 标记样本和患者
7. 表单工作流：导出条码以供打印或归档

后续步骤

1. 根据用例选择生成器类型
2. 阅读入门指南
3. 查看相应的生成器文档
4. 根据需要自定义外观
5. 如果工作流需要，则实现导出功能