如何在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 图像标签。 快速上手,无需管理外部图像文件或资产依赖性。

  1. 使用 NuGet 包管理器安装 https://www.nuget.org/packages/BarCode

    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 支持任何格式:文本、图像、音频、视频和二进制数据。 在HTML内的图像标签中使用获得的数据URL作为src属性。 如下是将GeneratedBarcode转换为数据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类创建条形码,传递条形码值和编码作为参数。 通过附加GeneratedBarcode获取数据URL。 此方法适用于 IronBarcode 中所有支持的条码格式

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

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

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

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

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

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

:path=/static-assets/barcode/content-code-examples/how-to/create-barcode-as-html-3.cs
// 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 标记?

使用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

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

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

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

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

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

:path=/static-assets/barcode/content-code-examples/how-to/create-barcode-as-html-5.cs
// 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 与我们的风格化功能相结合:

:path=/static-assets/barcode/content-code-examples/how-to/create-barcode-as-html-6.cs
// 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'");
Imports System.Drawing

' Create a customized barcode with specific styling
Dim customBarcode = BarcodeWriter.CreateBarcode("CUSTOM-123", BarcodeEncoding.Code128) _
    .AddAnnotationTextAboveBarcode("Product ID") _
    .SetMargins(15) _
    .ChangeBackgroundColor(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 文件?

使用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文件在适当的<body>标签中包含了条形码作为HTML标签,形成一个完整的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?

using 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 进行动态条码生成时尤为有利。

IronBarcode是否提供支持自定义条形码外观的功能?

是的,IronBarcode为条形码外观提供广泛的自定义选项,包括颜色、大小和文本注释,允许运您将条形码设计成符合您特定的设计要求。

IronBarcode如何帮助提高业务流程的效率?

IronBarcode通过快速准确的条码生成和读取提高了业务流程效率,减少了手动数据输入错误,并改善了库存和资产跟踪。

在项目中实现IronBarcode需要哪些编程技能?

了解C#编程的基础知识就足以在项目中实现IronBarcode,因为它提供了简单的方法和全面的文档来指导开发人员。

IronBarcode适合小项目和大型企业应用吗?

IronBarcode被设计为可扩展且多功能,适合需要强大条码解决方案的小项目和大型企业应用。

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

还在滚动吗?

想快速获得证据? PM > Install-Package BarCode
运行示例 观看您的字符串变成 BarCode。