syncfusion-blazor-barcode

Syncfusion Blazor Barcode Generator

Syncfusion's Blazor Barcode Generator package (Syncfusion.Blazor.BarcodeGenerator) provides four components for generating barcodes in Blazor applications:

Component	Use For
SfBarcodeGenerator	1D linear barcodes (Code39, Code128, Codabar, etc.) plus GS1 Code 128, ITF-14, and the full GS1 DataBar family
SfQRCodeGenerator	QR codes with optional logo embedding, plus GS1 QR Code (EnableGS1)
SfDataMatrixGenerator	2D Data Matrix codes for compact encoding, plus GS1 Data Matrix (EnableGS1)
SfDotCodeGenerator	High-density dot-matrix DotCode symbols, plus GS1 DotCode (EnableGS1)

All four work in Blazor Server, Blazor WebAssembly, and Blazor Web App (.NET 8+).

---

When to Use This Skill

• User needs to render or display a barcode in a Blazor component
• User asks about QR code generation (e.g., product links, 2FA, contact cards)
• User needs Data Matrix codes (pharmaceutical, logistics, label printing)
• User needs DotCode symbols for high-speed industrial/inkjet printing or product serialization
• User is configuring SfBarcodeGenerator, SfQRCodeGenerator, SfDataMatrixGenerator, or SfDotCodeGenerator
• User asks about exporting a barcode as an image (JPG/PNG) or Base64
• User asks about barcode types, error correction, checksums, or validation events
• User is embedding a logo in a QR code
• User asks about GS1 standards or GS1-compliant barcodes: GS1 Code 128, ITF-14, GS1 DataBar (Omnidirectional, Stacked, Stacked Omnidirectional, Limited, Expanded, Expanded Stacked), GS1 QR Code, GS1 Data Matrix, or GS1 DotCode
• User is building retail, logistics, warehouse, inventory management, product traceability, or supply chain labeling features
• User asks about GS1 Application Identifiers (AIs), FNC1 separators, EnableGS1, or GTIN/SSCC check-digit calculation

---

Navigation Guide

Setting Up the Project

📄 Read: references/getting-started.md

• NuGet package installation
• _Imports.razor namespace configuration
• Service registration in Program.cs
• Stylesheet and script references
• Setup for Blazor Server, WebAssembly, and Web App
• Adding the first barcode component to a page

1D Barcode Types and Configuration

📄 Read: references/barcode-types.md

• All supported BarcodeType enum values with descriptions
• Code39, Code39 Extended, Code11, Code32, Code93, Codabar, Code128
• Choosing the right type for your use case
• EnableCheckSum configuration
• OnValidationFailed event handling

QR Code Generator

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

• Basic QR code usage
• Error correction levels (L, M, Q, H)
• Embedding a logo image in the QR code center
• Customizing logo size
• Color, dimension, and display text customization
• OnValidationFailed event

Data Matrix Generator

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

• Basic Data Matrix code usage
• Color, dimension, and display text customization
• Common use cases (pharmaceuticals, labels)
• OnValidationFailed event

DotCode Generator

📄 Read: references/dotcode-generator.md

• Basic SfDotCodeGenerator usage
• Numeric, alphanumeric, byte, and GS1 encoding modes
• GS1 DotCode via EnableGS1 for pharmaceutical/healthcare serialization
• Color and dimension customization
• OnValidationFailed event and error causes

GS1 Barcode Standards (Retail, Logistics, Supply Chain)

📄 Read: references/gs1-barcodes.md

• GS1 Application Identifier (AI) syntax and validation rules
• GS1 Code 128 (BarcodeType.GS1Code128) for shipping/batch/expiry labels
• ITF-14 (BarcodeType.ITF14) for carton/case-level GTIN tracking
• Full GS1 DataBar family: Omnidirectional, Stacked, Stacked Omnidirectional, Limited, Expanded, Expanded Stacked
• GS1 QR Code and GS1 Data Matrix via EnableGS1
• GS1 DotCode overview (cross-links to dotcode-generator.md)
• Choosing the right GS1 symbology for retail, inventory, and product traceability use cases

Exporting and Customizing Barcodes

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

• Export barcode to image file (JPG/PNG)
• Export as Base64 string
• ForeColor for custom barcode color
• Width / Height for sizing
• BarcodeGeneratorDisplayText for label text
• Applies to all four generator types, including GS1-enabled modes

---

Quick Start Examples

1D Barcode

@using Syncfusion.Blazor.BarcodeGenerator

<SfBarcodeGenerator Width="200px" Height="150px"
                    Type="@BarcodeType.Code128"
                    Value="SYNCFUSION">
</SfBarcodeGenerator>

QR Code

@using Syncfusion.Blazor.BarcodeGenerator

<SfQRCodeGenerator Width="200px" Height="200px"
                   Value="https://www.syncfusion.com">
</SfQRCodeGenerator>

Data Matrix

@using Syncfusion.Blazor.BarcodeGenerator

<SfDataMatrixGenerator Width="200" Height="150"
                       Value="SYNCFUSION">
</SfDataMatrixGenerator>

DotCode

@using Syncfusion.Blazor.BarcodeGenerator

<SfDotCodeGenerator Width="300" Height="250"
                    Value="Product Serialization">
</SfDotCodeGenerator>

GS1 Code 128 (GS1-compliant 1D barcode)

@using Syncfusion.Blazor.BarcodeGenerator

<SfBarcodeGenerator Width="300px" Height="200px"
                    Type="@BarcodeType.GS1Code128"
                    Value="(01)09506000134352(17)261231(10)ABC123">
    <BarcodeGeneratorDisplayText Text="Product Serialization" />
</SfBarcodeGenerator>

GS1 QR Code (retail/traceability)

@using Syncfusion.Blazor.BarcodeGenerator

<SfQRCodeGenerator Width="250px" Height="250px"
                   Value="(01)09506000134352(17)271231(10)ABC123"
                   EnableGS1="true">
</SfQRCodeGenerator>

---

Key Properties

Property	Applies To	Description
Value	All	The data string to encode
Width	All	Width of the barcode (px or %)
Height	All	Height of the barcode (px or %)
Type	SfBarcodeGenerator	BarcodeType enum — selects the 1D symbology, including GS1Code128, ITF14, and the GS1 DataBar variants
ForeColor	All	Color of the barcode bars (e.g., "red", "#333")
EnableCheckSum	SfBarcodeGenerator	Adds/validates checksum digit (default true for Code39)
ErrorCorrectionLevel	SfQRCodeGenerator	QR error recovery: Low, Medium, Quartile, High
EnableGS1	SfQRCodeGenerator, SfDataMatrixGenerator, SfDotCodeGenerator	Switches the component into GS1 mode, encoding Value as (AI)data pairs with FNC1 handling
OnValidationFailed	All	Event triggered when Value contains invalid characters, malformed AI syntax, or an invalid check digit

---

Common Use Cases

Need	Component	Read
Product/inventory labels	SfBarcodeGenerator (Code128/Code39)	barcode-types.md
URL / contact / 2FA QR code	SfQRCodeGenerator	qr-code-generator.md
Branded QR code with logo	SfQRCodeGenerator + QRCodeLogo	qr-code-generator.md
Pharmaceutical / shipping labels	SfDataMatrixGenerator	data-matrix-generator.md
Industrial/inkjet product serialization	SfDotCodeGenerator	dotcode-generator.md
Shipping/batch/expiry label (GS1)	SfBarcodeGenerator (GS1Code128)	gs1-barcodes.md
Carton/case GTIN tracking	SfBarcodeGenerator (ITF14)	gs1-barcodes.md
Retail POS omnidirectional scan	SfBarcodeGenerator (GS1DataBarOmnidirectional)	gs1-barcodes.md
Small package / limited space GTIN	SfBarcodeGenerator (GS1DataBarStacked/GS1DataBarLimited)	gs1-barcodes.md
Variable-measure item or coupon (multi-AI)	SfBarcodeGenerator (GS1DataBarExpanded/ExpandedStacked)	gs1-barcodes.md
Supply chain / product traceability QR	SfQRCodeGenerator + EnableGS1	gs1-barcodes.md
Compact GS1 label (pharma/manufacturing)	SfDataMatrixGenerator + EnableGS1	gs1-barcodes.md
GS1 serialization on industrial printers	SfDotCodeGenerator + EnableGS1	dotcode-generator.md / gs1-barcodes.md
Download barcode as image	.Export() method	export-and-customization.md
Embed barcode in email/PDF	.ExportAsBase64Image()	export-and-customization.md