如何在C#中建立作為HTML的條碼

如何在C#中將條碼匯出為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

我如何將條碼匯出為資料URL?

在將條碼匯出為資料URL之前,了解什麼是資料URL。 資料URL(也稱為資料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中支持的條碼格式

為什麼在Web應用中使用資料URL很重要?

資料URL通過減少HTTP請求和改進頁面載入性能,為Web應用提供顯著優勢。 當您將條碼嵌入為資料URL時,圖像資料成為HTML文件的一部分,消除了單獨的圖像文件請求。 這有利於:

  • 單頁應用(SPA)需要最少的伺服器來回傳輸
  • 電子郵件範本可能被擋外部圖像的
  • 離線應用在沒有網路連接的情況下運行
  • 動態條碼生成建立實體文件效率低下

對於生產部署,請參閱我們的Azure部署指南AWS部署指南以進行基於雲的條碼生成。

什麼時候應該使用資料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條碼小於32KB以獲得最佳性能。 對於更大的條碼或多個條碼生成,請使用我們的匯出為流功能以有效地管理記憶體。

我如何將條碼匯出為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文件中。如需進階樣式選項,請參閱我們的自定義條碼樣式指南

為什麼HTML標籤匯出比外部圖像引用更好?

HTML標籤匯出比外部圖像引用提供了關鍵優勢:

  1. 沒有斷掉的圖像連結:條碼資料直接嵌入標籤中
  2. 更快的渲染:不需要額外的HTTP請求
  3. 簡化的部署:不需要單獨的圖像資產管理
  4. 更好的安全性:沒有文件路徑或伺服器結構暴露
  5. 動態生成:適用於實時條碼建立

這裡有一個實際的網頁應用整合範例:

: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應用,在這些應用中您動態地將條碼圖片注入組件。

我如何將條碼儲存為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文件包含作為HTML標籤的條碼,並在正確的<body>標籤內形成一個完整的HTML文件。對於具有多種文件格式的複雜場景,請參閱我們的輸出資料格式指南

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

完整的HTML文件在特定用例中提供明顯優勢:

  • 獨立文件說明:生成可列印的條碼頁
  • 郵件附件:發送自包含的條碼文件
  • 存檔用途:以正確的結構儲存條碼
  • 測試和排錯:獨立查看條碼
  • 批量處理:生成多個分發用文件

這是一個生成批量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. 文件管理:在報告中嵌入條碼
  4. 質量控制:生成可追溯的批次程式碼
  5. 活動管理:建立帶可掃描程式碼的門票

對於大量條碼生成,執行異步多執行緒來提高性能。 在處理像QR碼這樣的專業格式時,我們的C# QR碼生成器教程提供有關建立和自定義QR碼的全面指導以滿足各種商業需求。

常見問題

如何在C#中將條碼匯出為Data URL?

使用IronBarcode,您可以通過對GeneratedBarcode物件使用ToDataUrl()方法將條碼匯出為Data URL。只需使用BarcodeWriter.CreateBarcode()建立包含您期望的值和編碼的條碼,然後調用ToDataUrl()以獲取可以直接嵌入HTML的Data URL字串。

有哪三種HTML匯出格式可用於條碼?

IronBarcode提供三種HTML匯出格式:Data URL用於無需外部檔案的內嵌,HTML標籤用於直接注入到網頁中,以及完整的HTML檔案用於獨立使用。每種格式適合不同的網頁應用整合需求。

我可以只用一行程式碼生成條碼的HTML圖像標籤嗎?

是的,IronBarcode允許您用一行流暢的程式碼生成完整的HTML圖像標籤。使用BarcodeWriter.CreateBarcode(),配上您的條碼值和編碼,然後連結ToHtmlTag()方法以獲取可以插入的完整HTML圖像標籤。

什麼時候應該使用Data URLs而不是傳統的圖像檔案來生成條碼?

當條碼較小(小於32KB)且需要立即內嵌渲染時,使用Data URLs。它們非常適合單頁應用、電郵模板、具備離線功能的應用及動態條碼生成情境。IronBarcode的ToDataUrl()方法讓這種轉換無縫進行。

哪些條碼格式支持HTML匯出?

IronBarcode支持其所有條碼格式的HTML匯出,包括Code 128,QR碼等。ToDataUrl()、ToHtmlTag()和HTML檔案匯出方法適用於程式庫中所有支持的條碼格式。

使用Data URLs如何改善網頁應用效能?

Data URLs通過直接在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
運行範例觀看您的字串成為條碼。