syncfusion-angular-barcode

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Barcode Generation

条形码生成实现指南

When to Use This Skill

适用场景

Use this skill when you need to:

Create linear barcodes (Code39, Code128, Code11, Codabar, Code32, Code93) for product identification and inventory management
Generate QR codes for URLs, contact info, and quick data sharing
Encode Data Matrix codes for compact, high-density encoding (healthcare, logistics)
Customize barcode appearance (colors, dimensions, display text, logos)
Export barcodes as image files (PNG, JPG) or base64 strings
Add logos to QR codes for branding and visual enhancement

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

创建线性条形码（Code39、Code128、Code11、Codabar、Code32、Code93），用于产品标识和库存管理
生成QR码，用于URL、联系信息和快速数据共享
编码Data Matrix码，实现紧凑、高密度的信息编码（适用于医疗、物流行业）
自定义条形码外观（颜色、尺寸、显示文本、Logo）
导出条形码为图片文件（PNG、JPG）或base64字符串
为QR码添加Logo，用于品牌展示和视觉增强

Important: API Verification Required

重要提示：需验证API

API Verification Required: Always verify API class names, properties, and signatures by reading reference files (

references/*.md

) BEFORE generating code examples. Do not assume or infer class names.

Real-world scenarios:

Product labeling systems for retail/inventory
Mobile payment & authentication (QR codes)
Healthcare/pharmaceutical tracking (Data Matrix)
Document management & archiving
Marketing campaigns using branded QR codes

需验证API：在生成代码示例前，请务必通过参考文件（

references/*.md

）验证API类名、属性和签名。请勿自行假设或推断类名。

Component Overview

实际应用场景：

The Syncfusion Angular Barcode Generator supports three barcode families with extensive customization:

零售/库存的产品标签系统
移动支付与身份验证（QR码）
医疗/药品追踪（Data Matrix）
文档管理与归档
使用品牌化QR码的营销活动

Barcode Types

组件概述

Type	Use Case	Character Set	Industry
Linear (Code39, Code128, Code11, Codabar, Code32, Code93)	Product IDs, serial numbers, inventory	Alphanumeric (varies by type)	Retail, Warehouse, Telecom
QR Code	URLs, contact info, payments	Full Unicode	Marketing, Mobile, Finance
Data Matrix	Compact encoding, small labels	Numeric/Alphanumeric	Healthcare, Manufacturing, Logistics

Syncfusion Angular Barcode Generator支持三类条形码，且具备丰富的自定义功能：

Key Capabilities

条形码类型

✅ 7 linear barcode types with symbol validation
✅ Full customization (colors, dimensions, fonts, margins)
✅ Logo support for QR codes via
```
QRCodeLogo
```
✅ Multiple export formats (PNG, JPG, Base64)
✅ Automatic version selection for QR codes
✅ Display text customization below barcodes

类型	适用场景	字符集	适用行业
线性条形码（Code39、Code128、Code11、Codabar、Code32、Code93）	产品ID、序列号、库存管理	字母数字（因类型而异）	零售、仓储、电信
QR码	URL、联系信息、支付	完整Unicode字符集	营销、移动应用、金融
Data Matrix码	紧凑编码、小型标签	数字/字母数字	医疗、制造、物流

Documentation & Navigation Guide

核心功能

Getting Started

—

📄 Read: references/getting-started.md

Installation & package setup (

@syncfusion/ej2-angular-barcode-generator

)

Ivy vs ngcc package selection
Basic component setup & imports
Creating first Code128 barcode & QR code
Project configuration & CSS

✅ 7种线性条形码类型，支持符号验证
✅ 全面自定义（颜色、尺寸、字体、边距）
✅ QR码Logo支持，通过
```
QRCodeLogo
```
实现
✅ 多种导出格式（PNG、JPG、Base64）
✅ QR码自动版本选择
✅ 条形码下方显示文本自定义

Linear Barcodes (Code39, Code128, etc.)

文档与导航指南

—

快速开始

📄 Read: references/linear-barcodes.md

Code39 (standard alphanumeric)
Code39 Extended (full ASCII support)
Code128 (high-density encoding with 3 character sets)
Code11 (telecommunications)
Codabar (libraries, blood banks)
Code32 (pharmaceutical/cosmetics)
Code93 & Code93 Extended
Character set limitations & validation
When to choose each type

📄 阅读：references/getting-started.md

安装与包配置（

@syncfusion/ej2-angular-barcode-generator

）

Ivy与ngcc包选择
基础组件设置与导入
创建首个Code128条形码与QR码
项目配置与CSS设置

QR Codes

线性条形码（Code39、Code128等）

📄 Read: references/qr-codes.md

QR code versions (1-40) & capacity
Basic QR code generation
Color customization (foreColor, backgroundColor)
Dimension control (width, height)
Display text below QR code
Adding logos & icons (
```
QRCodeLogo
```
with
```
imageSource
```
)
Logo positioning & sizing
Image sources (local files, URLs, base64)
Error correction levels

📄 阅读：references/linear-barcodes.md

Code39（标准字母数字）
Code39 Extended（完整ASCII支持）
Code128（高密度编码，含3种字符集）
Code11（电信行业）
Codabar（图书馆、血库）
Code32（制药/化妆品行业）
Code93与Code93 Extended
字符集限制与验证
各类型的适用场景

Data Matrix Codes

QR码

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

Data Matrix overview & advantages
Use cases (healthcare, logistics, compact encoding)
Square vs rectangular symbols
Dimension customization
Color & appearance options
Display text configuration
When to use vs QR codes

📄 阅读：references/qr-codes.md

QR码版本（1-40）与容量
基础QR码生成
颜色自定义（foreColor、backgroundColor）
尺寸控制（width、height）
QR码下方显示文本设置
添加Logo与图标（通过
```
QRCodeLogo
```
的
```
imageSource
```
）
Logo定位与尺寸设置
图片源（本地文件、URL、base64）
纠错等级

Customization & Styling

Data Matrix码

📄 Read: references/customization.md

Shared customization properties (all barcode types)
Color customization (foreColor, backgroundColor)
Dimensions & scaling (width, height)
Margins & padding
Display text properties & positioning
CSS class customization
Responsive barcode sizing
Advanced styling across all types

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

Data Matrix概述与优势
适用场景（医疗、物流、紧凑编码）
方形与矩形符号
尺寸自定义
颜色与外观选项
显示文本配置
与QR码的适用场景对比

Exporting Barcodes

自定义与样式设置

📄 Read: references/exporting-barcodes.md

Export as image file (PNG, JPG)
Export as base64 string
Download functionality & file naming
Integration with backend systems
Use cases (printing, storage, sharing)

📄 阅读：references/customization.md

所有条形码类型的通用自定义属性
颜色自定义（foreColor、backgroundColor）
尺寸与缩放（width、height）
边距与内边距
显示文本属性与定位
CSS类自定义
响应式条形码尺寸
全类型高级样式设置

Quick Start Example

条形码导出

Basic Code128 Barcode

—

html

<!-- app.component.html -->
<ejs-barcodegenerator 
  #barcode
  type="Code128" 
  value="123456789" 
  width="200px" 
  height="150px">
</ejs-barcodegenerator>

typescript

// app.component.ts
import { Component } from '@angular/core';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

📄 阅读：references/exporting-barcodes.md

导出为图片文件（PNG、JPG）
导出为base64字符串
下载功能与文件名设置
与后端系统集成
适用场景（打印、存储、共享）

QR Code with Custom Color

快速开始示例

—

基础Code128条形码

html

<ejs-barcodegenerator 
  type="QRCode" 
  value="https://example.com" 
  [foreColor]="'#FF0000'"
  width="200px" 
  height="200px">
</ejs-barcodegenerator>

html

<!-- app.component.html -->
<ejs-barcodegenerator 
  #barcode
  type="Code128" 
  value="123456789" 
  width="200px" 
  height="150px">
</ejs-barcodegenerator>

typescript

// app.component.ts
import { Component } from '@angular/core';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

Common Patterns

自定义颜色的QR码

Pattern 1: Choose Barcode Type by Use Case

—

User needs to encode:

Product/inventory? → Code128 (high-density, retail standard)
Legacy system? → Code39 (widely supported)
Pharmaceutical? → Code32 (industry standard)
URL/contact? → QR Code (compact, mobile-friendly)
Small label? → Data Matrix (high-density, space-efficient)

html

<ejs-barcodegenerator 
  type="QRCode" 
  value="https://example.com" 
  [foreColor]="'#FF0000'"
  width="200px" 
  height="200px">
</ejs-barcodegenerator>

Pattern 2: Customize for Different Backgrounds

常见模式

—

模式1：根据场景选择条形码类型

typescript

// Light background
@barcode type="Code128" foreColor="#000000" backgroundColor="#FFFFFF"

// Dark background
@barcode type="Code128" foreColor="#FFFFFF" backgroundColor="#000000"

// Branded QR code
@barcode type="QRCode" [qRCodeLogo]="logoConfig" foreColor="#1976D2"

用户需编码内容：

产品/库存？→ Code128（高密度，零售行业标准）
遗留系统？→ Code39（广泛支持）
制药行业？→ Code32（行业标准）
URL/联系信息？→ QR码（紧凑，移动端友好）
小型标签？→ Data Matrix（高密度，节省空间）

Pattern 3: Export & Download

模式2：针对不同背景自定义样式

typescript

export class BarcodeComponent {
  @ViewChild('barcode') barcode: BarcodeGeneratorComponent;
  
  downloadBarcode() {
    this.barcode.exportImage('barcode','PNG');
  }

  getBase64() {
    const base64String = this.barcode.toDataURL('image/png');
    // Send to server or store
  }
}

typescript

// 浅色背景
@barcode type="Code128" foreColor="#000000" backgroundColor="#FFFFFF"

// 深色背景
@barcode type="Code128" foreColor="#FFFFFF" backgroundColor="#000000"

// 品牌化QR码
@barcode type="QRCode" [qRCodeLogo]="logoConfig" foreColor="#1976D2"

Pattern 4: Branded QR Codes with Logo

模式3：导出与下载

html

<ejs-barcodegenerator 
  type="QRCode" 
  value="https://mysite.com"
  #qrCode>
</ejs-barcodegenerator>

typescript

export class BrandedQRComponent implements OnInit {
  @ViewChild('qrCode') qrCode: BarcodeGeneratorComponent;
  
  ngOnInit() {
    (this.qrCode.qrcodelogo as QRCodeLogo) = {
      imageSource: 'assets/logo.svg',
      width: 50,
      height: 50
    };
  }
}

typescript

export class BarcodeComponent {
  @ViewChild('barcode') barcode: BarcodeGeneratorComponent;
  
  downloadBarcode() {
    this.barcode.exportImage('barcode','PNG');
  }

  getBase64() {
    const base64String = this.barcode.toDataURL('image/png');
    // 发送至服务器或存储
  }
}

Key Props Summary

模式4：带Logo的品牌化QR码

Property	Type	Use When	Default
`type`	string	Selecting barcode type (Code128, QRCode, DataMatrix)	Code128
`value`	string	Setting encoded data	""
`width`	string	Controlling barcode width (px, %)	Auto
`height`	string	Controlling barcode height (px, %)	Auto
`foreColor`	string	Setting barcode color (#RGB or name)	#000000
`backgroundColor`	string	Setting background color	#FFFFFF
`displayText`	object	`{ visibility: false }`	Adding human-readable label below barcode
`margin`	object	Adding space around barcode	{left: 0, right: 0, top: 0, bottom: 0}
`qRCodeLogo`	object	Adding logo to QR code (imageSource, width, height)	undefined
`mode`	string	Rendering mode (SVG or Canvas)	SVG

html

<ejs-barcodegenerator 
  type="QRCode" 
  value="https://mysite.com"
  #qrCode>
</ejs-barcodegenerator>

typescript

export class BrandedQRComponent implements OnInit {
  @ViewChild('qrCode') qrCode: BarcodeGeneratorComponent;
  
  ngOnInit() {
    (this.qrCode.qrcodelogo as QRCodeLogo) = {
      imageSource: 'assets/logo.svg',
      width: 50,
      height: 50
    };
  }
}

Common Use Cases

核心属性汇总

Use Case 1: Retail Product Labeling System

—

typescript

// Create multiple product barcodes with customization
products.forEach(product => {
  <ejs-barcodegenerator 
    type="Code128"
    [value]="product.sku"
    [displayText]="{ text: 'Product SKU: 123456789', visibility: true }"
    foreColor="#333333"
    width="150px"
    height="100px">
  </ejs-barcodegenerator>
});

属性	类型	适用场景	默认值
`type`	string	选择条形码类型（Code128、QRCode、DataMatrix）	Code128
`value`	string	设置编码数据	""
`width`	string	控制条形码宽度（px、%）	自动
`height`	string	控制条形码高度（px、%）	自动
`foreColor`	string	设置条形码颜色（#RGB或颜色名称）	#000000
`backgroundColor`	string	设置背景颜色	#FFFFFF
`displayText`	object	`{ visibility: false }`	在条形码下方添加人类可读标签
`margin`	object	设置条形码周围的边距	{left: 0, right: 0, top: 0, bottom: 0}
`qRCodeLogo`	object	为QR码添加Logo（imageSource、width、height）	undefined
`mode`	string	渲染模式（SVG或Canvas）	SVG

Use Case 2: Mobile QR Code with Branding

常见用例

—

用例1：零售产品标签系统

typescript

// QR code for app promotion with branded logo
<ejs-barcodegenerator 
  type="QRCode"
  value="https://appstore.com/myapp"
  [qRCodeLogo]="{ imageSource: 'assets/app-icon.png', width: 40, height: 40 }"
  [foreColor]="'#1976D2'"
  width="250px"
  height="250px">
</ejs-barcodegenerator>

typescript

// 创建多个自定义样式的产品条形码
products.forEach(product => {
  <ejs-barcodegenerator 
    type="Code128"
    [value]="product.sku"
    [displayText]="{ text: 'Product SKU: 123456789', visibility: true }"
    foreColor="#333333"
    width="150px"
    height="100px">
  </ejs-barcodegenerator>
});

Use Case 3: Healthcare Tracking with Data Matrix

用例2：带品牌标识的移动端QR码

typescript

// Compact Data Matrix for pharmaceutical packaging
<ejs-barcodegenerator 
  type="DataMatrix"
  [value]="medicineTrackingCode"
  [displayText]="{ text: 'Product SKU: 123456789', visibility: true }"
  width="80px"
  height="80px">
</ejs-barcodegenerator>

typescript

// 用于应用推广的品牌化QR码
<ejs-barcodegenerator 
  type="QRCode"
  value="https://appstore.com/myapp"
  [qRCodeLogo]="{ imageSource: 'assets/app-icon.png', width: 40, height: 40 }"
  [foreColor]="'#1976D2'"
  width="250px"
  height="250px">
</ejs-barcodegenerator>

Next Steps

用例3：医疗行业的Data Matrix追踪码

Start with getting-started.md to install the package
Choose your barcode type guide based on use case
Customize using customization.md
Export barcodes using exporting-barcodes.md

typescript

// 用于药品包装的紧凑型Data Matrix码
<ejs-barcodegenerator 
  type="DataMatrix"
  [value]="medicineTrackingCode"
  [displayText]="{ text: 'Product SKU: 123456789', visibility: true }"
  width="80px"
  height="80px">
</ejs-barcodegenerator>

—

后续步骤

—

从getting-started.md开始，安装组件包
根据场景选择对应的条形码类型指南
参考customization.md进行自定义设置
参考exporting-barcodes.md导出条形码