跳過到頁腳內容
使用IRONBARCODE

如何將條碼掃描器集成到Web應用程式中

在當今的數位時代,物理世界和虛擬世界的無縫融合對於優化各種流程變得越來越重要。 將條碼掃描器整合到 Web 應用程式中,就是這種整合趨勢的典型例子。 透過彌合有形產品和線上功能之間的差距,企業和個人都可以開啟無限可能,從輕鬆的庫存管理和增強的用戶體驗,到簡化的資料輸入、高效的追蹤系統和掃描二維碼。 這種整合不僅增強了線上應用程式的整體功能,而且為建立更互聯互通、高效的數位生態系統鋪平了道路。

本文將使用IronBarcode為 Web 應用程式新增條碼掃描器。 透過在基於網路的應用程式中添加條碼掃描器,可以從任何配備攝影機的裝置掃描和上傳影像,從而最大限度地提高數位生態系統的移動性。

如何將條碼掃描器整合到 Web 應用程式中

  1. 下載 C# IronBarcode 庫。
  2. 在 Visual Studio 中建立一個新的 ASP.NET Web 應用程式專案。
  3. 使用 HTML5 和 CSS 設計前端。
  4. 編寫後端方法,接收上傳的二維碼並將其轉換為文字。
  5. 使用標籤顯示結果。

IronBarcode。

IronBarcode 是一款兼具技術性和便利性的強大解決方案,為開發人員提供了一個強大的工具包,可將條碼掃描和生成功能順利整合到他們的應用程式中。 IronBarcode 以其全面的功能和直覺的設計,使企業和程式設計師能夠在軟體環境中輕鬆解碼、編碼和操作條碼。 無論是旨在優化庫存管理、促進資料交換還是增強用戶體驗,IronBarcode 都開啟了無限可能,簡化了複雜的條碼處理,使應用程式能夠透過瀏覽器以數位方式與實體世界進行互動。 IronBarcode 支援所有條碼格式和條碼符號系統。

建立條碼掃描 Web 應用程式

在本節中,我們將示範如何使用 IronBarcode 建立一個可以掃描條碼並顯示結果的 Web 應用程式。

  1. 首先在 Visual Studio 中建立一個新的 ASP.NET Web 應用程式項目,如下圖所示。

    如何將條碼掃描器整合到 Web 應用程式中:圖 1

    如何將條碼掃描器整合到 Web 應用程式中:圖 2

  2. 使用 NuGet 套件管理器控制台安裝 IronBarcode。

    為此,請開啟 NuGet 套件管理器控制台並執行以下命令來安裝 IronBarcode:

    Install-Package BarCode

    您也可以直接從NuGet 網站下載該軟體包。

  3. 安裝完成後,開啟Default.aspx檔案並將其替換為您的前端程式碼。 這將創建一個文件上傳按鈕、一個帶有文字"掃描條碼"的按鈕和一個顯示結果的標籤。

    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication6._Default" %>
    
    <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <div><br /><br /><br />
            <asp:FileUpload ID="fileUpload" runat="server" />
            <br />
            <asp:Button ID="btnScan" runat="server" Text="Scan Barcode" OnClick="btnScan_Click" />
            <br />
            <asp:Label ID="lblResult" runat="server"></asp:Label>
        </div>
    </asp:Content>
    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication6._Default" %>
    
    <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <div><br /><br /><br />
            <asp:FileUpload ID="fileUpload" runat="server" />
            <br />
            <asp:Button ID="btnScan" runat="server" Text="Scan Barcode" OnClick="btnScan_Click" />
            <br />
            <asp:Label ID="lblResult" runat="server"></asp:Label>
        </div>
    </asp:Content>
    HTML
  4. 現在我們將編寫後端程式碼,該程式碼將接收上傳的圖像,掃描圖像中的二維碼或條碼,並顯示結果。

    開啟Default.aspx.cs文件,並將現有程式碼替換為以下程式碼:

    using IronBarCode;
    using System;
    using System.IO;
    
    public partial class _Default : System.Web.UI.Page
    {
        // Event handler for the 'Scan Barcode' button click
        protected void btnScan_Click(object sender, EventArgs e)
        {
            try
            {
                // Ensure a file has been uploaded
                if (fileUpload.HasFile)
                {
                    // Get the uploaded file stream
                    Stream stream = fileUpload.PostedFile.InputStream;
    
                    // Use IronBarcode to read the barcode from the stream
                    var barcodeResults = BarcodeReader.Read(stream);
    
                    // Display the scanned barcode result
                    lblResult.Text = "Scanned Barcode: " + barcodeResults;
                }
                else
                {
                    lblResult.Text = "Please upload an image.";
                }
            }
            catch (Exception ex)
            {
                // Display any errors that occur during the scanning process
                lblResult.Text = "Error: " + ex.Message;
            }
        }
    }
    using IronBarCode;
    using System;
    using System.IO;
    
    public partial class _Default : System.Web.UI.Page
    {
        // Event handler for the 'Scan Barcode' button click
        protected void btnScan_Click(object sender, EventArgs e)
        {
            try
            {
                // Ensure a file has been uploaded
                if (fileUpload.HasFile)
                {
                    // Get the uploaded file stream
                    Stream stream = fileUpload.PostedFile.InputStream;
    
                    // Use IronBarcode to read the barcode from the stream
                    var barcodeResults = BarcodeReader.Read(stream);
    
                    // Display the scanned barcode result
                    lblResult.Text = "Scanned Barcode: " + barcodeResults;
                }
                else
                {
                    lblResult.Text = "Please upload an image.";
                }
            }
            catch (Exception ex)
            {
                // Display any errors that occur during the scanning process
                lblResult.Text = "Error: " + ex.Message;
            }
        }
    }
    Imports IronBarCode
    Imports System
    Imports System.IO
    
    Partial Public Class _Default
    	Inherits System.Web.UI.Page
    
    	' Event handler for the 'Scan Barcode' button click
    	Protected Sub btnScan_Click(ByVal sender As Object, ByVal e As EventArgs)
    		Try
    			' Ensure a file has been uploaded
    			If fileUpload.HasFile Then
    				' Get the uploaded file stream
    				Dim stream As Stream = fileUpload.PostedFile.InputStream
    
    				' Use IronBarcode to read the barcode from the stream
    				Dim barcodeResults = BarcodeReader.Read(stream)
    
    				' Display the scanned barcode result
    				lblResult.Text = "Scanned Barcode: " & barcodeResults
    			Else
    				lblResult.Text = "Please upload an image."
    			End If
    		Catch ex As Exception
    			' Display any errors that occur during the scanning process
    			lblResult.Text = "Error: " & ex.Message
    		End Try
    	End Sub
    End Class
    $vbLabelText   $csharpLabel
  5. 現在我們的專案已經完成,我們可以執行它,並在以下 URL 開啟網頁" https://localhost:44335/Default "。

    如何將條碼掃描器整合到 Web 應用程式中:圖 3

  6. 點選"選擇檔案"按鈕,上傳包含二維碼的圖片。

    如何將條碼掃描器整合到 Web 應用程式中:圖 4

  7. 最後,點選"掃描條碼"按鈕; 按鈕下方將顯示輸出結果。

    如何將條碼掃描器整合到 Web 應用程式中:圖 5

以上是建立具有條碼掃描功能的網頁的所有步驟。 現在您可以在線上讀取條碼,並且使用 IronBarcode 可以輕鬆地將其整合到您的 Web 應用程式中。

結論

透過 IronBarcode 等工具和解決方案將條碼掃描器整合到 Web 應用程式中,代表著實體領域和數位領域的變革性融合,促進了有形產品和線上功能之間的無縫互動。 這種整合使企業和個人能夠改善流程,從簡化庫存管理到高效資料輸入,同時簡化複雜的條碼處理,從而促進一個更互聯互通和優化的數位生態系統。 這裡提供的逐步指南為輕鬆地將條碼掃描功能添加到 Web 應用程式提供了一個全面的藍圖,展示了技術在徹底改變用戶體驗和重新定義虛擬世界和物理世界之間的界限方面的潛力。

有關如何使用IronBarcode讀取條碼的詳細教學及程式碼範例,請造訪此處。 若要了解如何將 IronBarcode 與 Blazor 應用程式一起使用,請造訪此連結

常見問題解答

如何將 BarCode 掃描器整合至網頁應用程式?

要將條碼掃描器整合到 Web 應用程式中,您可以使用 IronBarcode 函式庫。首先下載該函式庫,在 Visual Studio 中建立 ASP.NET 網頁應用程式,並使用 HTML 和 CSS 設定前端。IronBarcode 可讓您處理上傳的影像以掃描條碼,並有效率地顯示結果。

在 Web 應用程式中使用 BarCode 掃描器有什麼好處?

將條碼掃描器整合至網路應用程式可帶來許多好處,包括改善庫存管理、增強使用者體驗以及簡化資料輸入。IronBarcode 支援各種條碼格式和符號,使其成為無縫整合的多功能工具。

如何在我的專案中安裝 IronBarcode 以進行條碼掃描?

您可以使用 Visual Studio 中的 NuGet Package Manager 安裝 IronBarcode。使用命令 Install-Package IronBarcode 將其添加到您的專案中,啟用條碼掃描功能。

BarCode 掃描網頁應用程式的主要組成部分為何?

BarCode 掃描網路應用程式通常包含一個前端,其中有一個檔案上傳按鈕、一個掃描按鈕和一個顯示結果的標籤。後端使用 IronBarcode 處理影像,讀取並顯示條碼資料。

當在 BarCode 掃描應用程式中沒有上傳檔案時,該如何處理錯誤?

如果應用程式中沒有上傳檔案,您可以透過向使用者顯示提示來處理此情況,例如「請上傳圖片」,以確保順暢的使用者體驗。

我可以在Blazor應用程式中使用IronBarcode嗎?

是的,IronBarcode 可以整合到 Blazor 應用程式中。有教程可以指導您使用 IronBarcode 整合條碼掃描功能。

執行 BarCode 掃描網頁應用程式需要哪些步驟?

最後的步驟包括執行專案,並透過上傳帶有 BarCode 或 QR code 的影像進行測試,以確保掃描器能正確讀取並在網頁上顯示結果。

IronBarcode 如何增強網路應用程式的功能?

IronBarcode 透過實體產品與線上功能之間的順暢互動、支援各種條碼格式,以及提供高效解碼和操作條碼的強大工具包,增強網路應用程式的功能。

Jordi Bardia
軟體工程師
Jordi 在 Python、C# 和 C++ 上最得心應手,當他不在 Iron Software 展現技術時,便在做遊戲編程。在分担产品测测试,产品开发和研究的责任时,Jordi 为持续的产品改进增值。他说这种多样化的经验使他受到挑战并保持参与, 而这也是他与 Iron Software 中工作一大乐趣。Jordi 在佛罗里达州迈阿密长大,曾在佛罗里达大学学习计算机科学和统计学。