syncfusion-javascript-barcode

实现 Syncfusion 条形码生成器

适用场景： 你正在构建一个需要生成、自定义和导出条形码（线性码、QR 码或 Data Matrix 码）的 Web 应用。这包括销售点系统、库存管理、票务系统、医疗保健应用，或任何需要可扫描编码的解决方案。

---

条形码库概览

Syncfusion Barcode Generator 库（@syncfusion/ej2-barcode-generator）提供三种主要条形码类型：

• BarcodeGenerator：创建线性 1D 条形码（Code39、Code128、Codabar、Code11、Code32、Code93、Code128A/B/C）
• QRCodeGenerator：创建 2D QR 码，支持添加徽标和错误纠正
• DataMatrixGenerator：创建用于工业和零售应用的 2D Data Matrix 码

三者都使用相同的核心 API：通过配置初始化、添加到 DOM、自定义并导出。

---

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装和 npm 软件包设置
• 为 System.js 或打包工具配置项目
• 使用每种生成器类型创建第一个条形码
• CSS 导入和主题设置
• 基本的 DOM 添加模式

条形码类型与选择

📄 阅读： references/barcode-types.md

• 线性条形码类型：Code39、Code39 Extended、Code11、Codabar、Code32、Code93、Code128
• 各类型的字符集限制
• 各条形码格式的适用场景
• 根据使用场景选择条形码的指南

QR 码生成

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

• QR 码基础知识（版本、模块、容量）
• 使用 displayText 创建 QR 码
• 为 QR 码添加徽标／图标
• 错误纠正级别（Low、Medium、Quarter、High）
• 动态调整大小和版本管理

Data Matrix 条形码

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

• Data Matrix 概览和使用场景
• 创建 Data Matrix 码
• 对数字与字母数字数据进行编码
• 尺寸选择和布局模式
• 与库存系统集成

自定义与样式设置

📄 阅读： references/customization-styling.md

• 条形码颜色（foreColor、backgroundColor）
• 尺寸（width、height、自适应尺寸）
• 显示文本自定义（字体、可见性、对齐方式）
• 渲染模式（SVG 与 Canvas）
• 使用 CSS 和主题集成进行高级样式设置

导出与打印

📄 阅读： references/export-printing.md

• 导出为图像格式（JPG、PNG）
• 导出为 Base64 字符串以供存储
• 打印功能
• 浏览器中的下载处理
• 服务端集成模式

验证与事件

📄 阅读： references/validation-events.md

• 生成条形码前验证输入
• ValidateEvent 处理
• 错误预防和边缘情况
• 事件驱动的条形码更新
• 实时验证模式

---

快速入门示例

import { BarcodeGenerator } from '@syncfusion/ej2-barcode-generator';

// Linear barcode (Code128)
const barcode = new BarcodeGenerator({
  width: '200px',
  height: '150px',
  type: 'Code128',
  value: 'SYNCFUSION',
  mode: 'SVG',
  displayText: { visibility: true }
});

barcode.appendTo('#barcode');

// For QR Code
import { QRCodeGenerator } from '@syncfusion/ej2-barcode-generator';

const qrCode = new QRCodeGenerator({
  width: '200px',
  height: '200px',
  value: 'Your value here',
  displayText: { visibility: false },
  mode: 'SVG'
});

qrCode.appendTo('#qrcode');

// For Data Matrix
import { DataMatrixGenerator } from '@syncfusion/ej2-barcode-generator';

const dataMatrix = new DataMatrixGenerator({
  width: '200px',
  height: '200px',
  value: 'Syncfusion',
  mode: 'SVG'
});

dataMatrix.appendTo('#datamatrix');

---

常见模式

模式 1：类型选择

• 通用字母数字条形码使用 Code128（最灵活）
• URL、联系信息，或需要使用徽标进行品牌展示时，使用 QRCodeGenerator
• 工业标签和小空间编码使用 DataMatrixGenerator
• 旧版系统或 ASCII 字符已足够时，使用 Code39

模式 2：自定义流程

const barcode = new BarcodeGenerator({
  type: 'Code128',
  value: data,
  width: '200px',
  height: '150px',
  mode: 'SVG',
  foreColor: '#000000',
  backgroundColor: '#ffffff',
  displayText: { text: label }
});

barcode.appendTo('#element');

模式 3：动态导出

// Export to image with filename
barcode.exportImage('mybarcode', 'PNG');

// Export as Base64 for server submission
const base64 = await barcode.exportAsBase64Image('JPG');

模式 4：自适应尺寸

const barcode = new BarcodeGenerator({
  width: '100%',     // Responsive to container
  height: '150px',
  type: 'Code128',
  value: productCode
});

---

关键属性

属性	类型	默认值	用途
type	string	'Codabar'	条码类型（Code39、Code128 等）
value	string	''	要编码到条码中的数据
width	string	'200px'	条码宽度（px 或 %）
height	string	'150px'	条码高度
mode	string	'SVG'	渲染模式（SVG 或 Canvas）
foreColor	string	'#000000'	条码颜色
backgroundColor	string	'#ffffff'	背景颜色
displayText	object	{}	显示文本配置（可见性、文本、字体）
logo（仅限 QR）	object	null	Logo 配置（imageSource、width、height）
errorCorrectionLevel（仅限 QR）	number	0	纠错级别：0=低，1=中，2=四分之一，3=高

---

常见用例

1. 销售点：使用 Code128 即时生成商品条码
2. 库存管理：使用 Data Matrix 创建用于追踪的货运标签
3. 营销：生成指向促销 URL 的 QR 码
4. 医疗保健：使用 Code39 编码患者数据（兼容旧版系统）
5. 电子商务：将订单号生成为用于打包的 Code128 条码
6. 票务：创建带有 Logo 品牌标识的活动门票 QR 码
7. 文档管理：在 PDF 中嵌入 Data Matrix，用于分类和归档

---

后续步骤

从入门指南开始设置库，然后通过条码类型选择条码类型。如需自定义，请参阅自定义与样式。如需了解导出和打印工作流，请参阅导出与打印。