如何在C#中创建条形码作为HTML

如何在 C# 中将 BarCode 导出为 HTML?

This article was translated from English: Does it need improvement?
Translated
View the article in English

IronBarcode 使 C# 开发人员能够以三种格式将生成的条形码导出为 HTML:用于内嵌的数据 URL、用于直接注入的 HTML 标签或用于独立使用的完整 HTML 文件--提供了无需外部依赖的多功能集成选项。

快速入门:用一行代码将条形码导出为HTML标签

生成条形码,并使用一行流畅的代码将其直接导出为格式完整的 HTML 图像标签。 快速上手,无需管理外部图像文件或资产依赖性。

Nuget Icon立即开始使用 NuGet 创建 PDF 文件:

  1. 使用 NuGet 包管理器安装 IronBarcode

    PM > Install-Package BarCode

  2. 复制并运行这段代码。

    var htmlTag = BarcodeWriter.CreateBarcode("1234567890", BarcodeWriterEncoding.Code128).ToHtmlTag();
  3. 部署到您的生产环境中进行测试

    立即开始在您的项目中使用 IronBarcode,免费试用!
    arrow pointer

如何将 BarCode 导出为数据 URL?

在将条形码导出为数据 URL 之前,请先了解什么是数据 URL。 Data URL(也称为 Data URI)是一种统一资源标识符,可直接在 URL 字符串中嵌入数据。 这样就可以在网页中像外部资源一样内嵌显示这些数据。 数据 URL 支持任何格式:文本、图像、音频、视频和二进制数据。 将获得的数据 URL 作为 src 属性在 HTML 图像标记中使用。 以下是如何将 GeneratedBarcode 转换为 Data URL

:path=/static-assets/barcode/content-code-examples/how-to/ExportBarcodeAsDataUrl.cs
using IronBarCode;
using System;

GeneratedBarcode myBarcode = BarcodeWriter.CreateBarcode("https://ironsoftware.com/csharp/barcode/", BarcodeEncoding.QRCode);
var dataUrl = myBarcode.ToDataUrl();
Console.WriteLine(dataUrl);
Imports IronBarCode
Imports System

Private myBarcode As GeneratedBarcode = BarcodeWriter.CreateBarcode("https://ironsoftware.com/csharp/barcode/", BarcodeEncoding.QRCode)
Private dataUrl = myBarcode.ToDataUrl()
Console.WriteLine(dataUrl)
$vbLabelText   $csharpLabel

使用 BarcodeWriter 类中的 CreateBarcode() 方法创建条形码,并将条形码值和编码作为参数。 通过将 ToDataUrl() 方法附加到 GeneratedBarcode 获取 Data URL。 此方法适用于 IronBarcode 中所有支持的条码格式

为什么使用数据 URL 对 Web 应用程序很重要?

数据 URL 通过减少 HTTP 请求和提高页面加载性能为网络应用程序提供了显著优势。 当您将 BarCode 作为数据 URL 嵌入时,图像数据就会成为 HTML 文档本身的一部分,从而消除了单独的图像文件请求。 这样做的好处是

  • 单页应用程序(SPA)要求尽量减少服务器往返次数
  • 电子邮件模板,外部图片可能会被阻止
  • 可离线运行的应用程序无需网络连接即可运行
  • 动态条形码生成,其中创建物理文件效率低下

关于生产部署,请参阅我们的部署到 AzureAWS 部署指南,以了解基于云的条形码生成。

什么情况下应使用数据 URL 而不是图像文件?

当条形码较小(32KB 以下)且需要立即进行内联渲染时,请使用数据 URL。 在以下情况下,选择存储在服务器或 CDN 上的传统图像文件:

// Example: Choosing between Data URL and file export based on size
GeneratedBarcode barcode = BarcodeWriter.CreateBarcode("LARGE-DATA-STRING-HERE", BarcodeEncoding.PDF417);

// Check estimated size before choosing export method
if (barcode.BinaryStream.Length < 32768) // 32KB threshold
{
    // Use Data URL for smaller barcodes
    string dataUrl = barcode.ToDataUrl();
    // Embed directly in HTML
}
else
{
    // Save as file for larger barcodes
    barcode.SaveAsImage("large-barcode.png");
    // Reference as external resource
}
// Example: Choosing between Data URL and file export based on size
GeneratedBarcode barcode = BarcodeWriter.CreateBarcode("LARGE-DATA-STRING-HERE", BarcodeEncoding.PDF417);

// Check estimated size before choosing export method
if (barcode.BinaryStream.Length < 32768) // 32KB threshold
{
    // Use Data URL for smaller barcodes
    string dataUrl = barcode.ToDataUrl();
    // Embed directly in HTML
}
else
{
    // Save as file for larger barcodes
    barcode.SaveAsImage("large-barcode.png");
    // Reference as external resource
}
' Example: Choosing between Data URL and file export based on size
Dim barcode As GeneratedBarcode = BarcodeWriter.CreateBarcode("LARGE-DATA-STRING-HERE", BarcodeEncoding.PDF417)

' Check estimated size before choosing export method
If barcode.BinaryStream.Length < 32768 Then ' 32KB threshold
    ' Use Data URL for smaller barcodes
    Dim dataUrl As String = barcode.ToDataUrl()
    ' Embed directly in HTML
Else
    ' Save as file for larger barcodes
    barcode.SaveAsImage("large-barcode.png")
    ' Reference as external resource
End If
$vbLabelText   $csharpLabel

数据 URL 的大小限制是什么?

虽然现代浏览器在技术上支持几兆字节的数据 URL,但在实际操作中仍存在限制:

  • Internet Explorer 8:限制为 32KB
  • 现代浏览器:支持 2-4MB,但性能下降
  • 移动浏览器:内存限制带来更严格的限制
  • 电子邮件客户端:将数据 URL 限制为 8-64KB

将数据 URL BarCode 保持在 32KB 以下,以获得最佳性能。 对于较大的条形码或多个条形码的生成,请使用我们的 export as stream 功能进行高效的内存管理。

如何将条形码导出为 HTML 标记?

使用 ToHtmlTag() 方法将 GeneratedBarcode 输出为 HTML。 该方法可将 GeneratedBarcode 对象渲染为一个完整的 HTML 标签,以便直接注入 HTML,而无需依赖 JavaScript、CSS 或图像。 以下代码演示了 HTML 标记导出:

:path=/static-assets/barcode/content-code-examples/how-to/ExportBarcodeAsHtmlTag.cs
using IronBarCode;
using System;

GeneratedBarcode myBarcode = BarcodeWriter.CreateBarcode("https://ironsoftware.com/csharp/barcode/", BarcodeEncoding.QRCode);
var htmlTag = myBarcode.ToHtmlTag();
Console.WriteLine(htmlTag);
Imports IronBarCode
Imports System

Private myBarcode As GeneratedBarcode = BarcodeWriter.CreateBarcode("https://ironsoftware.com/csharp/barcode/", BarcodeEncoding.QRCode)
Private htmlTag = myBarcode.ToHtmlTag()
Console.WriteLine(htmlTag)
$vbLabelText   $csharpLabel

ToHtmlTag() 方法附加到 GeneratedBarcode 以获取生成条形码的 HTML 标记。 将此 HTML 标签直接嵌入到较大的 HTML 文件中。有关高级样式选项,请参阅我们的自定义 BarCode 样式指南。

为什么 HTML 标签导出比外部图片引用更好?

与外部图片引用相比,HTML 标签导出具有关键优势:

1.无破损图片链接:条形码数据直接嵌入标签中 2.更快的呈现:无需额外的 HTTP 请求 3.简化部署:无需单独的图像资产管理 4.更好的安全性:不暴露文件路径或服务器结构 5.动态生成:非常适合实时创建 BarCode

下面是一个实用的网络应用集成示例:

// Generate multiple barcodes for a product catalog
var products = new[] { "PROD-001", "PROD-002", "PROD-003" };
var htmlBuilder = new StringBuilder();

foreach (var productCode in products)
{
    var barcode = BarcodeWriter.CreateBarcode(productCode, BarcodeEncoding.Code128)
        .ResizeTo(200, 50)
        .SetMargins(10);

    htmlBuilder.AppendLine($"<div class='product-barcode'>");
    htmlBuilder.AppendLine($"  <p>Product: {productCode}</p>");
    htmlBuilder.AppendLine($"  {barcode.ToHtmlTag()}");
    htmlBuilder.AppendLine($"</div>");
}
// Generate multiple barcodes for a product catalog
var products = new[] { "PROD-001", "PROD-002", "PROD-003" };
var htmlBuilder = new StringBuilder();

foreach (var productCode in products)
{
    var barcode = BarcodeWriter.CreateBarcode(productCode, BarcodeEncoding.Code128)
        .ResizeTo(200, 50)
        .SetMargins(10);

    htmlBuilder.AppendLine($"<div class='product-barcode'>");
    htmlBuilder.AppendLine($"  <p>Product: {productCode}</p>");
    htmlBuilder.AppendLine($"  {barcode.ToHtmlTag()}");
    htmlBuilder.AppendLine($"</div>");
}
Imports System.Text

' Generate multiple barcodes for a product catalog
Dim products = New String() {"PROD-001", "PROD-002", "PROD-003"}
Dim htmlBuilder = New StringBuilder()

For Each productCode In products
    Dim barcode = BarcodeWriter.CreateBarcode(productCode, BarcodeEncoding.Code128) _
        .ResizeTo(200, 50) _
        .SetMargins(10)

    htmlBuilder.AppendLine("<div class='product-barcode'>")
    htmlBuilder.AppendLine($"  <p>Product: {productCode}</p>")
    htmlBuilder.AppendLine($"  {barcode.ToHtmlTag()}")
    htmlBuilder.AppendLine("</div>")
Next
$vbLabelText   $csharpLabel

如何自定义生成的 HTML 标记属性?

ToHtmlTag()会生成一个标准的 img 标记,您可以使用附加属性或自定义 HTML 包装来增强它。 如需高级定制,请将 IronBarcode 与我们的风格化功能相结合:

// Create a customized barcode with specific styling
var customBarcode = BarcodeWriter.CreateBarcode("CUSTOM-123", BarcodeEncoding.Code128)
    .AddAnnotationTextAboveBarcode("Product ID")
    .SetMargins(15)
    .ChangeBackgroundColor(System.Drawing.Color.LightGray);

// Get the HTML tag and add custom attributes
string htmlTag = customBarcode.ToHtmlTag();
string customizedTag = htmlTag.Replace("<img", "<img class='barcode' id='product-123'");
// Create a customized barcode with specific styling
var customBarcode = BarcodeWriter.CreateBarcode("CUSTOM-123", BarcodeEncoding.Code128)
    .AddAnnotationTextAboveBarcode("Product ID")
    .SetMargins(15)
    .ChangeBackgroundColor(System.Drawing.Color.LightGray);

// Get the HTML tag and add custom attributes
string htmlTag = customBarcode.ToHtmlTag();
string customizedTag = htmlTag.Replace("<img", "<img class='barcode' id='product-123'");
' Create a customized barcode with specific styling
Dim customBarcode = BarcodeWriter.CreateBarcode("CUSTOM-123", BarcodeEncoding.Code128) _
    .AddAnnotationTextAboveBarcode("Product ID") _
    .SetMargins(15) _
    .ChangeBackgroundColor(System.Drawing.Color.LightGray)

' Get the HTML tag and add custom attributes
Dim htmlTag As String = customBarcode.ToHtmlTag()
Dim customizedTag As String = htmlTag.Replace("<img", "<img class='barcode' id='product-123'")
$vbLabelText   $csharpLabel

什么情况下应选择 HTML 标签而不是数据 URL 格式?

需要时选择 HTML 标签格式:

  • 干净、可读的 HTML 输出
  • 与现有 HTML 模板轻松集成
  • 与 HTML 编辑器和 CMS 系统兼容
  • 为内容创作者提供直接复制粘贴功能

HTML 标签格式在 Blazor 应用程序中效果尤佳,您可以将条形码图像动态注入到组件中。

如何将 BarCode 保存为 HTML 文件?

使用 SaveAsHtmlFile() 方法将 GeneratedBarcode 保存为 HTML 文件。 下面的代码演示了这种方法:

:path=/static-assets/barcode/content-code-examples/how-to/ExportBarcodeAsHtmlFile.cs
using IronBarCode;

GeneratedBarcode myBarcode = BarcodeWriter.CreateBarcode("https://ironsoftware.com/csharp/barcode/", BarcodeEncoding.QRCode);
myBarcode.SaveAsHtmlFile("myBarcode.html");
Imports IronBarCode

Private myBarcode As GeneratedBarcode = BarcodeWriter.CreateBarcode("https://ironsoftware.com/csharp/barcode/", BarcodeEncoding.QRCode)
myBarcode.SaveAsHtmlFile("myBarcode.html")
$vbLabelText   $csharpLabel

此方法接受一个文件路径字符串。 生成的 HTML 文件将条形码作为 HTML 标记包含在适当的 <html>, <head><body> 标记中,形成一个完整的 HTML 文件。对于使用多种文件格式的复杂情况,请参阅我们的 输出数据格式指南

为什么要生成完整的 HTML 文件而不是片段?

完整的 HTML 文件在特定使用情况下具有明显的优势:

  • Standalone 文档:生成可打印的 BarCode 表单
  • 电子邮件附件:发送独立的条形码文件
  • 存档目的:以适当的结构存储条形码
  • 测试和调试:独立查看 BarCode
  • 批量处理:生成多个文件以供分发

以下是生成一批 HTML 文件的示例:

// Generate HTML files for inventory items
public void GenerateInventoryBarcodes(List<InventoryItem> items)
{
    foreach (var item in items)
    {
        var barcode = BarcodeWriter.CreateBarcode(item.SKU, BarcodeEncoding.Code128)
            .AddAnnotationTextBelowBarcode($"{item.Name} - ${item.Price:F2}")
            .ResizeTo(300, 100);

        // Save with descriptive filename
        string filename = $"barcode_{item.SKU}_{DateTime.Now:yyyyMMdd}.html";
        barcode.SaveAsHtmlFile(filename);
    }
}
// Generate HTML files for inventory items
public void GenerateInventoryBarcodes(List<InventoryItem> items)
{
    foreach (var item in items)
    {
        var barcode = BarcodeWriter.CreateBarcode(item.SKU, BarcodeEncoding.Code128)
            .AddAnnotationTextBelowBarcode($"{item.Name} - ${item.Price:F2}")
            .ResizeTo(300, 100);

        // Save with descriptive filename
        string filename = $"barcode_{item.SKU}_{DateTime.Now:yyyyMMdd}.html";
        barcode.SaveAsHtmlFile(filename);
    }
}
' Generate HTML files for inventory items
Public Sub GenerateInventoryBarcodes(items As List(Of InventoryItem))
    For Each item In items
        Dim barcode = BarcodeWriter.CreateBarcode(item.SKU, BarcodeEncoding.Code128) _
            .AddAnnotationTextBelowBarcode($"{item.Name} - ${item.Price:F2}") _
            .ResizeTo(300, 100)

        ' Save with descriptive filename
        Dim filename As String = $"barcode_{item.SKU}_{DateTime.Now:yyyyMMdd}.html"
        barcode.SaveAsHtmlFile(filename)
    Next
End Sub
$vbLabelText   $csharpLabel

HTML 文件导出的常见用例有哪些?

事实证明,HTML 文件导出在这些情况下非常有价值:

1.零售销售点系统:生成可打印的价格标签 2.仓库管理:为货架创建条形码标签 3.文档管理:在报告中嵌入 BarCode 4.质量控制:生成可跟踪的批次代码 5.事件管理:使用可扫描代码创建票据

对于大批量条形码生成,实施 async 和多线程 以提高性能。 在使用 QR 代码等专业格式时,我们的 C# QR 代码生成器教程可为创建和定制 QR 代码提供全面指导,以满足各种业务需求。

常见问题解答

如何在 C# 中将条形码导出为数据 URL?

使用 IronBarcode,您可以通过使用 GeneratedBarcode 对象上的 ToDataUrl() 方法将条形码导出为数据 URL。只需使用BarcodeWriter.CreateBarcode()创建您所需值和编码的条形码,然后调用ToDataUrl()获取可直接嵌入HTML的数据URL字符串。

BarCode 有哪三种 HTML 导出格式?

IronBarcode 提供三种 HTML 导出格式:数据 URL 用于内嵌,无需外部文件;HTML 标签用于直接注入网页;完整的 HTML 文件用于独立使用。每种格式都能满足网络应用程序中不同的集成需求。

我可以用一行代码生成条形码的 HTML 图像标签吗?

是的,IronBarcode 允许您用一行流畅的代码生成一个完整的 HTML 图像标签。使用 BarcodeWriter.CreateBarcode() 生成您的条码值和编码,然后链入 ToHtmlTag() 方法以获得一个完整的 HTML 图像标签,以便插入。

何时应使用数据 URL 而不是传统的图像文件来制作 BarCode?

当条形码较小(32KB 以下)且需要立即进行内联渲染时,请使用数据 URL。它们是单页应用程序、电子邮件模板、离线应用程序和动态条码生成方案的理想选择。IronBarcode的ToDataUrl()方法可实现无缝转换。

HTML 导出支持哪些条形码格式?

IronBarcode 支持其所有用于 HTML 导出的条形码格式,包括 Code 128、QR 码等。ToDataUrl(), ToHtmlTag() 和 HTML 文件导出方法适用于库中所有受支持的条码格式。

使用数据 URL 如何提高网络应用程序的性能?

数据 URL 通过直接在 HTML 文档中嵌入条形码图像数据,消除了对图像文件的单独 HTTP 请求,从而提高了性能。这减少了服务器往返次数,提高了页面加载时间,这在网络应用程序中使用 IronBarcode 进行动态条码生成时尤为有利。

Hairil Hasyimi Bin Omar
软件工程师
如所有伟大的工程师一般,Hairil 是个热心的学习者。他正在提高对 C#、Python 和 Java 的知识,并利用这些知识为 Iron Software 团队成员增值。Hairil 从马来西亚的玛拉工业大学加入 Iron Software 团队,获得化学与工艺工程学士学位。
准备开始了吗?
Nuget 下载 2,070,733 | 版本: 2026.2 刚刚发布