
如何將條碼掃描器整合到Web應用程式中
在當今的數位時代,實體與虛擬世界的無縫融合變得愈發重要,以優化各種流程。 如將條碼掃描器納入Web應用程式這種整合,就是具體的例子。 透過縮短實體產品與線上功能之間的距離,企業和個人都可以開啟一個可能性的領域,從輕鬆的庫存管理和增強的使用者體驗到簡化的資料輸入、效率更高的追踪系統和QR碼掃描。 這種整合不僅增強了在線應用程式的整體功能,還為一個更互聯互通和高效的數位生態系統鋪平了道路。
在這篇文章中,我們將使用IronBarcode來將條碼掃描器新增到Web應用程式中。 通過將條碼掃描器新增到基於網頁的應用程式中,圖片可以從任何配備相機的裝置上掃描和上傳,最大化數位生態系統的機動性。
如何將條碼掃描器整合到Web應用程式中
- 下載C# IronBarcode程式庫。
- 在Visual Studio中建立一個新的ASP.NET Web應用程式專案。
- 使用HTML5和CSS設計前端。
- 編寫後端方法,將上傳的QR碼轉換為文字。
- 使用標籤顯示結果。
IronBarcode
IronBarcode在技術與便利的交叉路口提供了一個強大的解決方案,為開發者提供了一個穩健的工具包,使其能夠順利地將條碼掃描和生成整合到其應用程式中。 憑藉其全面的功能和直觀的設計,IronBarcode使企業和程式設計師能夠輕鬆地在其軟體環境中解碼、編碼和操作條碼。 無論是優化庫存管理、促進資料交換或增強使用者體驗,IronBarcode都開啟了可能性的領域,簡化了條碼處理的複雜性,並透過瀏覽器使應用程式以數位方式與實體世界互動。 IronBarcode支援所有條碼格式和條碼符號。
建立條碼掃描Web應用程式
在本節中,我們將示範如何使用IronBarcode構建一個將掃描條碼並顯示結果的Web應用程式。
-
如下圖所示,首先在Visual Studio中建立一個新的ASP.NET Web應用程式專案。


-
使用NuGet包管理控制台安裝IronBarcode。
為此,開啟NuGet包管理控制台,並運行以下命令以安裝IronBarcode:
您也可以從NuGet網站直接下載包。
-
完成安裝後,開啟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>HTML -
現在我們將編寫後端程式碼,該程式碼將獲取上傳的圖片,掃描其中的QR碼或條碼,並顯示結果。
開啟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; } } }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 -
現在我們的專案已完成,可以運行它並開啟一個網頁在以下URL "
https://localhost:44335/Default"。
-
按下選擇檔案按鈕並上傳包含QR碼的圖片。

-
最後,按下掃描條碼按鈕; 結果將顯示在按鈕下方。

以上是建立具有條碼掃描功能的網頁的所有步驟。 現在您將能夠線上讀取條碼,並且可以輕鬆地使用IronBarcode整合整合到您的Web應用程式中。
結論
通過像IronBarcode這樣的工具和解決方案將條碼掃描器納入Web應用程式,代表了實體和數位領域的變革性融合,促進了實體產品與線上功能的無縫互動。 這種整合授權企業和個人提升流程,從簡化的庫存管理到高效的資料輸入,同時簡化了複雜的條碼處理,從而促進更互聯和優化的數位生態系統。 此處提供的分步指南提供了一個全面的藍圖,輕鬆地將條碼掃描功能新增到Web應用程式中,展示了技術改革使用者體驗和重新定義虛擬和實體世界之間界限的潛力。
欲了解如何使用IronBarcode閱讀條碼的詳細教學,並附帶程式碼範例,請點選這裡。 要了解如何將IronBarcode與Blazor應用程式一起使用,請存取此連結。

Curtis Chau擁有Carleton大學的電腦科學學士學位,專精於前端開發,擁有Node.js、TypeScript、JavaScript和React的專業知識。Curtis熱衷於建立直觀且美觀的使用者介面,喜愛使用現代框架並建立結構良好、視覺吸引力的手冊。
相關文章


