Syncfusion Blazor Barcode Generator
Syncfusion's Blazor Barcode Generator package (Syncfusion.Blazor.BarcodeGenerator) provides three components for generating barcodes in Blazor applications:
| Component |
Use For |
SfBarcodeGenerator |
1D linear barcodes (Code39, Code128, Codabar, etc.) |
SfQRCodeGenerator |
QR codes with optional logo embedding |
SfDataMatrixGenerator |
2D Data Matrix codes for compact encoding |
All three 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 is configuring
SfBarcodeGenerator, SfQRCodeGenerator, or SfDataMatrixGenerator
- 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
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
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 three generator types
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>
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 |
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 |
OnValidationFailed |
All |
Event triggered when Value contains invalid characters |
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 |
| Download barcode as image |
.Export() method |
export-and-customization.md |
| Embed barcode in email/PDF |
.ExportAsBase64Image() |
export-and-customization.md |
1---
2name: syncfusion-blazor-barcode
3description: "Build and troubleshoot barcode generation in Blazor using SfBarcodeGenerator, SfQRCodeGenerator, and SfDataMatrixGenerator. Trigger for 1D barcodes (Code39, Code128, Codabar), QR codes with logo and error correction, Data Matrix, checksum validation, and exporting barcodes to images in Syncfusion Blazor apps."
4metadata:
5 author: "Syncfusion Inc"
6 version: "34.1.29"
7 category: "Data Visualization"
8---
9
10# Syncfusion Blazor Barcode Generator
11
12Syncfusion's Blazor Barcode Generator package (`Syncfusion.Blazor.BarcodeGenerator`) provides three components for generating barcodes in Blazor applications:
13
14| Component | Use For |
15|-----------|---------|
16| `SfBarcodeGenerator` | 1D linear barcodes (Code39, Code128, Codabar, etc.) |
17| `SfQRCodeGenerator` | QR codes with optional logo embedding |
18| `SfDataMatrixGenerator` | 2D Data Matrix codes for compact encoding |
19
20All three work in **Blazor Server**, **Blazor WebAssembly**, and **Blazor Web App** (.NET 8+).
21
22---
23
24## When to Use This Skill
25
26- User needs to render or display a barcode in a Blazor component
27- User asks about QR code generation (e.g., product links, 2FA, contact cards)
28- User needs Data Matrix codes (pharmaceutical, logistics, label printing)
29- User is configuring `SfBarcodeGenerator`, `SfQRCodeGenerator`, or `SfDataMatrixGenerator`
30- User asks about exporting a barcode as an image (JPG/PNG) or Base64
31- User asks about barcode types, error correction, checksums, or validation events
32- User is embedding a logo in a QR code
33
34---
35
36## Navigation Guide
37
38### Setting Up the Project
39📄 **Read:** [references/getting-started.md](references/getting-started.md)
40- NuGet package installation
41- `_Imports.razor` namespace configuration
42- Service registration in `Program.cs`
43- Stylesheet and script references
44- Setup for Blazor Server, WebAssembly, and Web App
45- Adding the first barcode component to a page
46
47### 1D Barcode Types and Configuration
48📄 **Read:** [references/barcode-types.md](references/barcode-types.md)
49- All supported `BarcodeType` enum values with descriptions
50- Code39, Code39 Extended, Code11, Code32, Code93, Codabar, Code128
51- Choosing the right type for your use case
52- `EnableCheckSum` configuration
53- `OnValidationFailed` event handling
54
55### QR Code Generator
56📄 **Read:** [references/qr-code-generator.md](references/qr-code-generator.md)
57- Basic QR code usage
58- Error correction levels (L, M, Q, H)
59- Embedding a logo image in the QR code center
60- Customizing logo size
61- Color, dimension, and display text customization
62- `OnValidationFailed` event
63
64### Data Matrix Generator
65📄 **Read:** [references/data-matrix-generator.md](references/data-matrix-generator.md)
66- Basic Data Matrix code usage
67- Color, dimension, and display text customization
68- Common use cases (pharmaceuticals, labels)
69- `OnValidationFailed` event
70
71### Exporting and Customizing Barcodes
72📄 **Read:** [references/export-and-customization.md](references/export-and-customization.md)
73- Export barcode to image file (JPG/PNG)
74- Export as Base64 string
75- `ForeColor` for custom barcode color
76- `Width` / `Height` for sizing
77- `BarcodeGeneratorDisplayText` for label text
78- Applies to all three generator types
79
80---
81
82## Quick Start Examples
83
84### 1D Barcode
85```razor
86@using Syncfusion.Blazor.BarcodeGenerator
87
88<SfBarcodeGenerator Width="200px" Height="150px"
89 Type="@BarcodeType.Code128"
90 Value="SYNCFUSION">
91</SfBarcodeGenerator>
92```
93
94### QR Code
95```razor
96@using Syncfusion.Blazor.BarcodeGenerator
97
98<SfQRCodeGenerator Width="200px" Height="200px"
99 Value="https://www.syncfusion.com">
100</SfQRCodeGenerator>
101```
102
103### Data Matrix
104```razor
105@using Syncfusion.Blazor.BarcodeGenerator
106
107<SfDataMatrixGenerator Width="200" Height="150"
108 Value="SYNCFUSION">
109</SfDataMatrixGenerator>
110```
111
112---
113
114## Key Properties
115
116| Property | Applies To | Description |
117|----------|-----------|-------------|
118| `Value` | All | The data string to encode |
119| `Width` | All | Width of the barcode (px or %) |
120| `Height` | All | Height of the barcode (px or %) |
121| `Type` | `SfBarcodeGenerator` | `BarcodeType` enum — selects the 1D symbology |
122| `ForeColor` | All | Color of the barcode bars (e.g., `"red"`, `"#333"`) |
123| `EnableCheckSum` | `SfBarcodeGenerator` | Adds/validates checksum digit (default `true` for Code39) |
124| `ErrorCorrectionLevel` | `SfQRCodeGenerator` | QR error recovery: Low, Medium, Quartile, High |
125| `OnValidationFailed` | All | Event triggered when `Value` contains invalid characters |
126
127---
128
129## Common Use Cases
130
131| Need | Component | Read |
132|------|-----------|------|
133| Product/inventory labels | `SfBarcodeGenerator` (Code128/Code39) | barcode-types.md |
134| URL / contact / 2FA QR code | `SfQRCodeGenerator` | qr-code-generator.md |
135| Branded QR code with logo | `SfQRCodeGenerator` + `QRCodeLogo` | qr-code-generator.md |
136| Pharmaceutical / shipping labels | `SfDataMatrixGenerator` | data-matrix-generator.md |
137| Download barcode as image | `.Export()` method | export-and-customization.md |
138| Embed barcode in email/PDF | `.ExportAsBase64Image()` | export-and-customization.md |