syncfusion-angular-barcode

实现条形码生成

何时使用此技能

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

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

重要：必须验证 API

必须验证 API：生成代码示例前，务必阅读参考文件（references/*.md），确认 API 类名、属性和签名。不要假设或推断类名。

实际应用场景：

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

---

组件概述

Syncfusion Angular Barcode Generator 支持三种条形码类型，并提供丰富的自定义选项：

条形码类型

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

主要功能

• ✅ 支持 7 种线性条形码类型，并提供符号验证
• ✅ 全面自定义（颜色、尺寸、字体、边距）
• ✅ 通过 QRCodeLogo 支持 QR 码徽标
• ✅ 支持 多种导出格式（PNG、JPG、Base64）
• ✅ 自动选择版本，适用于 QR 码
• ✅ 自定义条形码下方的显示文本

---

文档与导航指南

入门指南

📄 阅读： references/getting-started.md

• 安装和软件包设置（@syncfusion/ej2-angular-barcode-generator）
• Ivy 与 ngcc 软件包选择
• 基本组件设置和导入
• 创建第一个 Code128 条形码和 QR 码
• 项目配置和 CSS

线性条形码（Code39、Code128 等）

📄 阅读： references/linear-barcodes.md

• Code39（标准字母数字）
• Code39 Extended（完整 ASCII 支持）
• Code128（使用 3 种字符集的高密度编码）
• Code11（电信）
• Codabar（图书馆、血库）
• Code32（制药/化妆品）
• Code93 和 Code93 Extended
• 字符集限制和验证
• 如何选择类型

QR 码

📄 阅读： references/qr-codes.md

• QR 码版本（1-40）和容量
• 基本 QR 码生成
• 颜色自定义（foreColor、backgroundColor）
• 尺寸控制（width、height）
• QR 码下方的显示文本
• 添加徽标和图标（使用 QRCodeLogo 和 imageSource）
• 徽标定位和尺寸设置
• 图像来源（本地文件、URL、base64）
• 纠错级别

Data Matrix 码

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

• Data Matrix 概述和优势
• 用途（医疗保健、物流、紧凑编码）
• 正方形与矩形符号
• 尺寸自定义
• 颜色和外观选项
• 显示文本配置
• 何时使用 Data Matrix 码而非 QR 码

自定义与样式

📄 阅读： references/customization.md

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

导出条码

📄 阅读： references/exporting-barcodes.md

• 导出为图像文件（PNG、JPG）
• 导出为 base64 字符串
• 下载功能与文件命名
• 与后端系统集成
• 使用场景（打印、存储、分享）

---

快速入门示例

基本 Code128 条码

<ejs-barcodegenerator 
  #barcode
  type="Code128" 
  value="123456789" 
  width="200px" 
  height="150px">
</ejs-barcodegenerator>

// 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 {}

自定义颜色的 QR Code

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

---

常见模式

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

用户需要编码：

• 产品／库存？→ Code128（高密度，零售业标准）
• 旧版系统？→ Code39（广泛支持）
• 药品？→ Code32（行业标准）
• URL／联系方式？→ QR Code（紧凑，适合移动设备）
• 小标签？→ Data Matrix（高密度，节省空间）

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

// 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"

模式 3：导出与下载

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
  }
}

模式 4：带 Logo 的品牌 QR Code

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

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

---

关键 Props 汇总

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

---

常见使用场景

使用场景 1：零售产品标签系统

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

使用场景 2：带品牌标识的移动 QR Code

// 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>

使用场景 3：使用 Data Matrix 进行医疗追踪

// 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>

---

后续步骤

• 从 getting-started.md 开始安装软件包
• 根据使用场景选择条码类型指南
• 使用 customization.md 进行自定义
• 使用 exporting-barcodes.md 导出条码