Back to Details

syncfusion-aspnetcore-barcodes

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

⚠️ STRICT USAGE RULES — MANDATORY FOR ALL CODE GENERATION

⚠️ 严格使用规则 — 所有代码生成必须遵守

These rules are non-negotiable. They must be followed for every code generation request using this skill.
这些规则不可协商。使用本技能进行每一次代码生成请求时都必须遵守。

Rule A — Use Only Provided Reference Files

规则A — 仅使用提供的参考文件

  • You must always read 
    references/getting-started.md
     for every request
  • Read other reference files only if they directly match the user's query: 
    • barcode-types.md
      → 1D linear barcodes (Code39, Code128, Codabar, etc.)
    • qr-code.md
      → QR codes with optional logo embedding
    • data-matrix.md
      → DataMatrix barcodes
    • customization.md
      → color, size, display text properties
    • export.md
      → PNG/JPG/Base64 export functionality
  • No external knowledge is allowed:
    • ❌ Do NOT use internet documentation
    • ❌ Do NOT use training-data assumptions
    • ✅ If a feature cannot be confirmed from reference files, apply Rule B
  • 每次请求都必须阅读**
    references/getting-started.md
    **
  • 仅当参考文件与用户查询直接匹配时才阅读其他文件： 
    • barcode-types.md
      → 一维线性条码（Code39、Code128、Codabar等）
    • qr-code.md
      → 带可选logo嵌入的QR码
    • data-matrix.md
      → DataMatrix条码
    • customization.md
      → 颜色、尺寸、显示文本属性
    • export.md
      → PNG/JPG/Base64导出功能
  • 禁止使用外部知识：
    • ❌ 请勿使用互联网文档
    • ❌ 请勿使用训练数据中的假设
    • ✅ 如果某个功能无法从参考文件中确认，请应用规则B

Rule B — No Guessing, No Inference

规则B — 禁止猜测、禁止推断

If a feature, property, API, or behavior is not explicitly documented in the reference files:
You must NOT:
  • Invent properties or methods
  • Infer missing APIs or parameters
  • Assume deprecated or undocumented features exist
  • Generalize from other Syncfusion components
Instead, respond with:
⚠️ NOT DOCUMENTED: [feature name] is not covered in the reference files.
Skipping this feature to avoid generating incorrect code.
如果某个功能、属性、API或行为未在参考文件中明确记录：
您不得：
  • 虚构属性或方法
  • 推断缺失的API或参数
  • 假设已弃用或未记录的功能存在
  • 从其他Syncfusion组件进行推广
相反，请回复：
⚠️ 未记录：[功能名称]未在参考文件中涵盖。
跳过此功能以避免生成错误代码。

Barcode Components Overview

条码组件概述

Syncfusion EJ2 ASP.NET Core provides three barcode components via tag helpers:
ComponentTag HelperBest ForKey Properties
BarcodeGenerator
<ejs-barcodegenerator>
Linear 1D barcodes (Code39, Code128, Codabar, etc.)
type
, 
value
, 
foreColor
, 
width
, 
height
QR Code Generator
<ejs-qrcodegenerator>
2D QR codes, URLs, large payloads
value
, 
width
, 
height
, 
foreColor
, 
logoUrl
DataMatrix Generator
<ejs-datamatrixgenerator>
2D labels, print media, compact storage
value
, 
width
, 
height
, 
foreColor
All three support:
  • ✅ Custom colors (
    foreColor
    )
  • ✅ Dimension control (
    width
    , 
    height
    )
  • ✅ Display text customization
  • ✅ Export to PNG/JPG/Base64
Syncfusion EJ2 ASP.NET Core通过标签助手提供三种条码组件：
组件标签助手最佳适用场景关键属性
BarcodeGenerator
<ejs-barcodegenerator>
一维线性条码（Code39、Code128、Codabar等）
type
, 
value
, 
foreColor
, 
width
, 
height
QR Code Generator
<ejs-qrcodegenerator>
二维QR码、URL、大负载数据
value
, 
width
, 
height
, 
foreColor
, 
logoUrl
DataMatrix Generator
<ejs-datamatrixgenerator>
二维标签、打印介质、紧凑存储
value
, 
width
, 
height
, 
foreColor
这三个组件均支持：
  • ✅ 自定义颜色（
    foreColor
    ）
  • ✅ 尺寸控制（
    width
    , 
    height
    ）
  • ✅ 显示文本定制
  • ✅ 导出为PNG/JPG/Base64

Navigation Guide

导航指南

Always read 
references/getting-started.md
first, then read only files relevant to the request.
Reference FileRead When the Query Involves
📄 getting-started.mdEvery request — NuGet setup, tag helper registration, CDN, script manager
📄 barcode-types.md1D barcodes, Code39, Code128, Codabar, Code11, Code32, Code93, barcode selection guidance
📄 qr-code.mdQR code rendering, logo embedding, error correction, versioning (v1–v40)
📄 data-matrix.mdDataMatrix overview, rendering, use cases
📄 customization.mdColor (
foreColor
), dimensions (
width
/
height
), display text, rendering mode
📄 export.mdImage export (PNG/JPG), Base64 export, export methods
请始终先阅读
references/getting-started.md
，然后仅阅读与请求相关的文件。
参考文件当查询涉及以下内容时阅读
📄 getting-started.md所有请求 — NuGet设置、标签助手注册、CDN、脚本管理器
📄 barcode-types.md一维条码、Code39、Code128、Codabar、Code11、Code32、Code93、条码选择指南
📄 qr-code.mdQR码渲染、logo嵌入、错误纠正、版本控制（v1–v40）
📄 data-matrix.mdDataMatrix概述、渲染、使用场景
📄 customization.md颜色（
foreColor
）、尺寸（
width
/
height
）、显示文本、渲染模式
📄 export.md图片导出（PNG/JPG）、Base64导出、导出方法

Quick Start

快速开始

1. Install NuGet Package

1. 安装NuGet包

powershell
Install-Package Syncfusion.EJ2.AspNet.Core
powershell
Install-Package Syncfusion.EJ2.AspNet.Core

2. Register Tag Helper (
~/Pages/_ViewImports.cshtml
)

2. 注册标签助手（
~/Pages/_ViewImports.cshtml
）

cshtml
@addTagHelper *, Syncfusion.EJ2
cshtml
@addTagHelper *, Syncfusion.EJ2

3. Add CDN Resources (
~/Pages/Shared/_Layout.cshtml
)

3. 添加CDN资源（
~/Pages/Shared/_Layout.cshtml
）

cshtml
<head>
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
</head>
<body>
    ...
    <ejs-scripts></ejs-scripts>
</body>
cshtml
<head>
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
</head>
<body>
    ...
    <ejs-scripts></ejs-scripts>
</body>

4. Basic Examples

4. 基础示例

BarcodeGenerator (Code128)

BarcodeGenerator（Code128）

cshtml
<ejs-barcodegenerator id="barcode"
    width="200px"
    height="150px"
    type="Code128"
    value="SYNCFUSION"
    mode="SVG">
</ejs-barcodegenerator>
cshtml
<ejs-barcodegenerator id="barcode"
    width="200px"
    height="150px"
    type="Code128"
    value="SYNCFUSION"
    mode="SVG">
</ejs-barcodegenerator>

QR Code

QR码

cshtml
<ejs-qrcodegenerator id="qrcode"
    width="200px"
    height="200px"
    value="https://syncfusion.com"
    mode="SVG">
</ejs-qrcodegenerator>
cshtml
<ejs-qrcodegenerator id="qrcode"
    width="200px"
    height="200px"
    value="https://syncfusion.com"
    mode="SVG">
</ejs-qrcodegenerator>

DataMatrix

DataMatrix

cshtml
<ejs-datamatrixgenerator id="datamatrix"
    width="200px"
    height="150px"
    value="Syncfusion"
    mode="SVG">
</ejs-datamatrixgenerator>
cshtml
<ejs-datamatrixgenerator id="datamatrix"
    width="200px"
    height="150px"
    value="Syncfusion"
    mode="SVG">
</ejs-datamatrixgenerator>

Common Patterns

通用模式

Choose Barcode Type by Content

根据内容选择条码类型

Use CaseRecommended TypeReason
Numeric only, short dataCodabar or Code11Compact, simple
Alphanumeric, uppercaseCode39Industry standard for labels
Full ASCII, variable lengthCode128Most versatile, widely supported
Pharmaceutical (Italian)Code32Specialized regulatory requirement
Dense alphanumeric dataCode93Better compression than Code39
URL or large payloadQR CodeHandles complex data, scannable by phones
Label/print media with compact storageDataMatrixIndustry standard for logistics
使用场景推荐类型原因
仅数字、短数据Codabar或Code11紧凑、简单
字母数字、大写Code39标签行业标准
完整ASCII、可变长度Code128最通用、支持广泛
制药行业（意大利）Code32专门的法规要求
高密度字母数字数据Code93比Code39压缩率更高
URL或大负载数据QR码处理复杂数据，可被手机扫描
标签/打印介质、紧凑存储DataMatrix物流行业标准

Customize Colors (All Generators)

自定义颜色（所有生成器）

cshtml
<ejs-barcodegenerator id="barcode"
    width="200px" height="150px"
    type="Code128" value="SYNCFUSION"
    foreColor="red" mode="SVG">
</ejs-barcodegenerator>
cshtml
<ejs-barcodegenerator id="barcode"
    width="200px" height="150px"
    type="Code128" value="SYNCFUSION"
    foreColor="red" mode="SVG">
</ejs-barcodegenerator>

Embed Logo in QR Code

在QR码中嵌入Logo

cshtml
<ejs-qrcodegenerator id="qrcode"
    width="200px" height="200px"
    value="https://syncfusion.com"
    logoUrl="logo.png"
    mode="SVG">
</ejs-qrcodegenerator>
cshtml
<ejs-qrcodegenerator id="qrcode"
    width="200px" height="200px"
    value="https://syncfusion.com"
    logoUrl="logo.png"
    mode="SVG">
</ejs-qrcodegenerator>

Export Barcode on Button Click

点击按钮导出条码

cshtml
<button onclick="exportBarcode()">Export as JPG</button>

<script>
  function exportBarcode() {
    var barcode = document.getElementById("barcode").ej2_instances[0];
    barcode.exportImage('MyBarcode', 'JPG');
  }
  
  function exportAsBase64() {
    var barcode = document.getElementById("barcode").ej2_instances[0];
    var base64String = barcode.exportAsBase64Image('PNG');
    console.log(base64String);
  }
</script>
cshtml
<button onclick="exportBarcode()">导出为JPG</button>

<script>
  function exportBarcode() {
    var barcode = document.getElementById("barcode").ej2_instances[0];
    barcode.exportImage('MyBarcode', 'JPG');
  }
  
  function exportAsBase64() {
    var barcode = document.getElementById("barcode").ej2_instances[0];
    var base64String = barcode.exportAsBase64Image('PNG');
    console.log(base64String);
  }
</script>

Hide Display Text

隐藏显示文本

cshtml
<ejs-barcodegenerator id="barcode"
    width="200px" height="150px"
    type="Code128" value="SYNCFUSION"
    displayText.visibility="false"
    mode="SVG">
</ejs-barcodegenerator>
cshtml
<ejs-barcodegenerator id="barcode"
    width="200px" height="150px"
    type="Code128" value="SYNCFUSION"
    displayText.visibility="false"
    mode="SVG">
</ejs-barcodegenerator>

When to Use This Skill

何时使用本技能

✅ Rendering any barcode type in ASP.NET Core
✅ Choosing between BarcodeGenerator, QR Code, and DataMatrix
✅ Customizing barcode appearance (color, size, text)
✅ Embedding a logo in a QR code
✅ Exporting barcodes as images or Base64 strings
✅ Selecting appropriate barcode type for use case
✅ 在ASP.NET Core中渲染任何类型的条码
✅ 在BarcodeGenerator、QR码和DataMatrix之间进行选择
✅ 自定义条码外观（颜色、尺寸、文本）
✅ 在QR码中嵌入logo
✅ 将条码导出为图片或Base64字符串
✅ 根据使用场景选择合适的条码类型