使用 IRONBARCODE

如何建立 Blazor QR 碼掃描器

發佈 2024年2月18日
分享:

介紹

本文探討快速響應碼掃描器的整合(QR碼掃描器)在使用IronQR的Blazor應用程式中,這是一個.NET程式庫。 QR 碼是二維條碼,能夠儲存比一般一維條碼更多的數據。

Blazor 是一個由微軟推出的框架,允許開發者製作單頁應用程式(使用 Blazor WebAssembly 應用程式)或者使用 C# 來建立互動式網頁介面,(Blazor Server,本指南將著重於此).

將IronQR與Blazor Server整合以進行QR碼掃描是一種戰略性的組合,能夠發揮兩項技術的優勢。 通過將 IronQR 與 Blazor 應用程式整合,您可以高效處理 QR 碼的生成和掃描。 在庫存管理、票務系統和無接觸信息共享等各種商業環境中,QR 碼閱讀器的此功能需求日益增長。

理解基礎知識

什麼是 Blazor Server?

Blazor 伺服器是 ASP.NET Core 平台的一部分的網頁應用程式框架。 它使開發人員能夠使用C#而不是JavaScript來構建互動式網頁用戶介面。 此伺服器端模型通過處理用戶在 SignalR 連接上的互動來運行,這是一種即時網頁功能。 這有助於開發人員創建有效且互動的網絡應用程式。

IronQR 介紹

IronQR是一個.NET庫,以其讀取、解釋和生成 QR 碼具有高準確性。 它提供了一系列功能,包括處理不同類型的QR碼內容的能力。 IronQR的優勢在於其簡單性及易於整合到.NET應用程式中,使其成為開發人員在尋求融入和創建QR碼功能時的首選。

如何建立 Blazor QR 碼掃描器

  1. 在 Visual Studio Code 中創建 Blazor 伺服器應用程式

  2. 使用 NuGet 套件管理器安裝 QR Code 類別庫

  3. 在 index.razor 中使用 HTML 和 CSS 創建用戶介面。

  4. 編寫上傳文件處理邏輯

  5. 使用QR庫編寫QR掃描邏輯。

  6. 在文本框中顯示結果

設定環境

建立一個新的 Blazor 伺服器應用程式

啟動 Visual Studio,然後選擇「建立新專案」。在專案範本選擇畫面中,找到並選擇「Blazor Server App」範本。 點擊下一步。

如何创建 Blazor QR 码扫描器:图 1 - 找到正确的模版来实施

選擇模板後,輸入專案名稱和位置。(保持其他所有設為預設值)然後點擊下一步按鈕。

如何建立 Blazor QR Code 掃描器:圖 2 - 配置專案詳細資料

現在選擇所需的 .NET Framework 並點擊創建按鈕。 它將創建一個Blazor Server應用程式。

如何建立 Blazor QR 碼掃描器:圖 3 - 選擇 .NET Framework 並創建項目

安裝IronQR庫

從選單列中點擊工具。 從下拉選單中選擇 NuGet 套件管理員。 從內容選單中,選擇「管理解決方案的 NuGet 套件」。 這將開啟 NuGet 套件管理器標籤。

如何創建 Blazor QR 碼掃描器:圖 4 - 訪問 NuGet 套件管理器

在 NuGet 套件管理器中,在「瀏覽」選項卡中搜尋「IronQR」。 然後在列表中找到「IronQR」套件。點擊「安裝」按鈕。

如何創建 Blazor 二維碼掃描器:圖 5 - 通過瀏覽標籤安裝 IronQR 套件

現在您已安裝好所有內容,我們可以探討項目結構以及如何將所有東西整合到您的項目中。

實現 QR 碼掃描

構建使用者介面

QR碼掃描器的使用者介面主要是在 Index.razor 文件內建構的。這個文件是Blazor Server專案的一部分,利用HTML和Razor語法相結合來創建一個動態和互動式的網頁。 結構包括:

@page "/"
@using System.IO
@using Microsoft.AspNetCore.Components.Forms
@using IronQr
@using IronSoftware.Drawing
@inject IJSRuntime JSRuntime
<PageTitle>QR Code Scanner</PageTitle>
<div>
    <h1>QR Code Scanner</h1> 
    <InputFile OnChange="HandleSelectedFile" accept="image/*" class="file-input" />
    @if (!string.IsNullOrEmpty(qrImageSrc))
    {
        <img src="@qrImageSrcForDisplay" alt="QR Code Image" class="qr-image" />
    }
    <button @onclick="ScanQRCode" disabled="@(!fileSelected)" class="button scan-button">Scan QR Code</button>
    @if (!string.IsNullOrEmpty(scannedText))
    {
        <div class="result-section">
            <button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
        </div>
    }
</div>
@page "/"
@using System.IO
@using Microsoft.AspNetCore.Components.Forms
@using IronQr
@using IronSoftware.Drawing
@inject IJSRuntime JSRuntime
<PageTitle>QR Code Scanner</PageTitle>
<div>
    <h1>QR Code Scanner</h1> 
    <InputFile OnChange="HandleSelectedFile" accept="image/*" class="file-input" />
    @if (!string.IsNullOrEmpty(qrImageSrc))
    {
        <img src="@qrImageSrcForDisplay" alt="QR Code Image" class="qr-image" />
    }
    <button @onclick="ScanQRCode" disabled="@(!fileSelected)" class="button scan-button">Scan QR Code</button>
    @if (!string.IsNullOrEmpty(scannedText))
    {
        <div class="result-section">
            <button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
        </div>
    }
</div>
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/" using System.IO using Microsoft.AspNetCore.Components.Forms using IronQr using IronSoftware.Drawing inject IJSRuntime JSRuntime <PageTitle> QR Code Scanner</PageTitle> <div> <h1> QR Code Scanner</h1> <InputFile OnChange="HandleSelectedFile" accept="image/*" class="file-input" /> if(!string.IsNullOrEmpty(qrImageSrc))
"image/*" Class="file-input" /> [if](Not String.IsNullOrEmpty(qrImageSrc))
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Friend @page "/" using System.IO using Microsoft.AspNetCore.Components.Forms using IronQr using IronSoftware.Drawing inject IJSRuntime JSRuntime <PageTitle> QR Code Scanner</PageTitle> <div> <h1> QR Code Scanner</h1> <InputFile OnChange="HandleSelectedFile" accept="image/*" Class
"HandleSelectedFile" accept="image/*" Class
Friend page "/" [using] System.IO [using] Microsoft.AspNetCore.Components.Forms [using] IronQr [using] IronSoftware.Drawing inject IJSRuntime JSRuntime (Of PageTitle) QR Code Scanner</PageTitle> (Of div) (Of h1) QR Code Scanner</h1> <InputFile OnChange="HandleSelectedFile" accept
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <img src="@qrImageSrcForDisplay" alt="QR Code Image" class="qr-image" />
		"QR Code Image" class="qr-image" />
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <img src="@qrImageSrcForDisplay" alt="QR Code Image" class
		"@qrImageSrcForDisplay" alt="QR Code Image" class
		<img src="@qrImageSrcForDisplay" alt
End Class
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <button onclick="ScanQRCode" disabled="@(!fileSelected)" class="button scan-button"> Scan QR Code</button> if(!string.IsNullOrEmpty(scannedText))
	"@(!fileSelected)" class="button scan-button"> Scan QR Code</button> [if](Not String.IsNullOrEmpty(scannedText))
	If True Then
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <button onclick="ScanQRCode" disabled="@(!fileSelected)" class
	"ScanQRCode" disabled="@(!fileSelected)" class
	<button onclick="ScanQRCode" disabled
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <div class="result-section"> <button onclick="CopyToClipboard" class="button copy-button"> Copy</button> </div>
		"CopyToClipboard" class="button copy-button"> Copy</button> </div>
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <div class="result-section"> <button onclick="CopyToClipboard" class
		"result-section"> <button onclick="CopyToClipboard" class
		<div class="result-section"> <button onclick
	End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'</div>
VB   C#

標題和標題: The <PageTitle>和<h1><code>標籤定義了頁面的標題,</code><h1>` 標籤則定義了主要標題,為用戶設置上下文。</p> <p><strong>圖片上傳控件</strong>: An <code><InputFile></code> component 用於上傳 QR 碼圖像。 此元件專門設計用於僅接受圖像文件,通過過濾不相關的文件類型來提升使用者體驗。</p> <p><strong>圖像顯示</strong>:圖像上傳後,將使用<code><img></code>標籤。 這種視覺反饋對於用戶確認正確的文件已上傳是至關重要的。</p> <p><strong>掃描按鈕</strong>:標記為 <code>@onclick="ScanQRCode</code> 的按鈕觸發掃描過程。 其可用性取決於是否選擇了文件,從而增強了介面的直觀性。</p> <p><strong>結果顯示</strong>:掃描的 QR 碼文本顯示在文字輸入框中,便於查看。 另一個按鈕允許用戶將此文本複製到剪貼板。</p> <h3 id="anchor-36-49css36-49site-css">網站中的CSS樣式在site.css</h3> <p>QR Code Scanner 的視覺美學和佈局在 <code>site.css</code> 文件中定義。</p> <pre><code class="language-css">.content { padding: 20px; margin: 10px auto; /* Centers the content */ max-width: 500px; /* Sets a max width for the content */ border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); text-align: center; } .file-input, .result-input { margin: 10px 0; padding: 10px; border-radius: 5px; border: 1px solid #ddd; width: 100%; } .button { background-color: #4CAF50; color: white; border: none; cursor: pointer; padding: 10px; margin: 10px 0; border-radius: 5px; transition: background-color 0.3s, box-shadow 0.3s; width: auto; /* Adjusts button width */ display: inline-block; /* Allows the width to adjust to content */ } .button:hover { background-color: #45a049; box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .qr-image { max-width: 300px; max-height: 300px; display: block; margin: 10px auto; border-radius: 10px; } .result-section { display: flex; flex-direction: column; align-items: center; width: 100%; } .result-input { width: 100%; box-sizing: border-box; } .copy-button { margin-top: 10px; white-space: nowrap; }</code></pre> <p><strong><code>.content</code></strong>:此類別樣式化主要內容區域,賦予其固定寬度、居中對齊和細微陰影以增強深度。</p> <p><strong><code>.file-input, .result-input</code></strong>:這些類別為檔案輸入和結果顯示元素設置樣式,確保它們在視覺上一致並完全佔據容器的寬度。</p> <p><strong><code>.button</code></strong>:按鈕採用獨特的綠色背景設計,圓角和懸停效果,以增強用戶互動性。</p> <p><strong><code>.qr-image</code></strong>:QR 代碼圖像的樣式包括大小限制和自動邊距以居中,使圖像顯著而不至於過於突出。</p> <p><strong><code>.result-section</code></strong>:這個類別確保結果部分內的元素居中對齊並適當地間隔。</p> <h3 id="anchor-36-49">處理文件上傳</h3> <p><code>HandleSelectedFile</code> 方法是 QR 碼掃描過程中的關鍵部分,負責處理使用者的文件上傳並準備進行掃描。 當使用者通過`選擇文件時,此方法會被觸發<inputfile>元件。 以下代碼顯示:</p> <pre class='naked-code'><code class="language-cs">private async Task HandleSelectedFile(InputFileChangeEventArgs e) { selectedFile = e.File; fileSelected = true; var imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages"); Directory.CreateDirectory(imagesDirectory); // Ensure the directory exists // Use a GUID as the unique file name var uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(selectedFile.Name); var fullPath = Path.Combine(imagesDirectory, uniqueFileName); await using (var fileStream = new FileStream(fullPath, FileMode.Create)) { await selectedFile.OpenReadStream().CopyToAsync(fileStream); } // Store the full path in qrImageSrc for scanning qrImageSrc = fullPath; // Optionally, create a base64 string for displaying the image (if needed) byte [] imageBytes = await File.ReadAllBytesAsync(fullPath); var base64String = Convert.ToBase64String(imageBytes); qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart('.')};base64,{base64String}"; }</code></pre> <div class="code-content code-content-inner"> <div class="code_window" > <div class="language-selection__content-page-wrapper"> </div> <div class="code_window_content"> <div class="code-window__action-buttons-wrapper code-window__action-buttons-wrapper--content-page"> <button title="點擊複製" class="code-window__action-button code-window__action-button--copy copy-clipboard" data-copy-text="點擊複製" data-copied-text="已複製到剪貼板" data-clipboard-id="code-explorer" data-placement="bottom" > <i class="fa-kit fa-copy-example"></i> </button> <button title="全螢幕模式" class="code-window__action-button code-window__action-button--full-screen js-full-screen-code-example-modal" > <i class="fas fa-expand"></i> </button> <button title="退出全螢幕" class="code-window__action-button code-window__action-button--exit-full-screen js-exit-full-screen-code-example-modal" > <i class="fas fa-compress"></i> </button> </div> <pre class="prettyprint linenums lang-cs"><code>private async Task HandleSelectedFile(InputFileChangeEventArgs e) { selectedFile = e.File; fileSelected = true; var imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages"); Directory.CreateDirectory(imagesDirectory); // Ensure the directory exists // Use a GUID as the unique file name var uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(selectedFile.Name); var fullPath = Path.Combine(imagesDirectory, uniqueFileName); await using (var fileStream = new FileStream(fullPath, FileMode.Create)) { await selectedFile.OpenReadStream().CopyToAsync(fileStream); } // Store the full path in qrImageSrc for scanning qrImageSrc = fullPath; // Optionally, create a base64 string for displaying the image (if needed) byte [] imageBytes = await File.ReadAllBytesAsync(fullPath); var base64String = Convert.ToBase64String(imageBytes); qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart('.')};base64,{base64String}"; }</code></pre> <pre class="prettyprint linenums lang-vb"><code>Private Async Function HandleSelectedFile(ByVal e As InputFileChangeEventArgs) As Task selectedFile = e.File fileSelected = True Dim imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages") Directory.CreateDirectory(imagesDirectory) ' Ensure the directory exists ' Use a GUID as the unique file name Dim uniqueFileName = Guid.NewGuid().ToString() & Path.GetExtension(selectedFile.Name) Dim fullPath = Path.Combine(imagesDirectory, uniqueFileName) 'INSTANT VB TODO TASK: Local functions are not converted by Instant VB: ' await using(var fileStream = New FileStream(fullPath, FileMode.Create)) ' { ' await selectedFile.OpenReadStream().CopyToAsync(fileStream); ' } ' Store the full path in qrImageSrc for scanning qrImageSrc = fullPath ' Optionally, create a base64 string for displaying the image (if needed) Dim imageBytes() As Byte = Await File.ReadAllBytesAsync(fullPath) Dim base64String = Convert.ToBase64String(imageBytes) qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart("."c)};base64,{base64String}" End Function</code></pre> </div> <div class="code_window_bottom"> <span class="language_selection"> <span class="ls-span">VB  </span> <span> <label class="switch"> <input type="checkbox" checked="checked"> <span class="slider round"></span> </label> </span> <span class="ls-span">C#</span> </span> </div> </div> </div> <p>以下是其功能的詳細說明:</p> <p><strong>文件選擇和驗證</strong>:當用戶上傳文件時,該方法使用 <code>InputFileChangeEventArgs</code> 捕獲文件的詳細信息。 接著將此檔案賦值給 <code>selectedFile</code> 變數,並將布林值 <code>fileSelected</code> 設為 true,表示輸入的數據/文件已準備好進行處理。</p> <p><strong>建立檔案路徑</strong>:該方法準備一個目錄來存儲上傳的圖片。 它使用 <code>Path.Combine</code> 建立到 '<code>UploadedImages</code>' 目錄的路徑,並通過 <code>Directory.CreateDirectory</code> 確保其存在。 這一步對於系統化地整理上傳的檔案至關重要。</p> <p><strong>生成唯一檔名</strong>:為避免與現有檔案發生衝突,將使用 GUID 生成唯一檔名(全域唯一識別碼)附加上原始檔案的擴展名。 這確保每個上傳的檔案都是 <code>uniquePathdentified</code>。</p> <p><strong>存檔</strong>:然後檔案會儲存到伺服器上。 該方法創建一個文件流,指向新生成的文件路徑,並使用 <code>await selectedFile.OpenReadStream</code> 將上傳文件的內容複製到此流中。().CopyToAsync(文件流)`. 此步驟完成上傳過程。</p> <p><strong>準備顯示圖像</strong>:檔案儲存後,必須將圖像顯示給用戶以進行確認。 該方法將檔案讀取為位元組陣列,並將其轉換為 base64 字串,適合直接嵌入到一個 <code><img></code>tag<code>的</code>src` 屬性。 此轉換允許顯示圖像而無需對伺服器發出單獨的圖像文件請求。</p> <h3 id="anchor-36-49-qr-36-49">掃描 QR 碼</h3> <p><code>ScanQRCode</code> 方法是 Blazor Server 應用程式中 QR 碼掃描功能的核心。 此方法將取得上傳的圖像,並使用IronQR來提取QR碼數據。</p> <pre class='naked-code'><code class="language-cs">private async Task ScanQRCode() { // Check if there is a valid image to work with if (string.IsNullOrEmpty(qrImageSrc)) return; try { var inputBmp = AnyBitmap.FromFile(qrImageSrc); QrImageInput imageInput = new QrImageInput(inputBmp); QrReader reader = new QrReader(); IEnumerable<QrResult> results = reader.Read(imageInput); // Check if there are any results and if the first result contains text var firstResult = results.FirstOrDefault(); if (firstResult != null && !string.IsNullOrWhiteSpace(firstResult.Value.ToString())) { scannedText = firstResult.Value.ToString(); } else { scannedText = "QR value not found!"; } } catch (Exception ex) { scannedText = "Error scanning QR code: " + ex.Message; } }</code></pre> <div class="code-content code-content-inner"> <div class="code_window" > <div class="language-selection__content-page-wrapper"> </div> <div class="code_window_content"> <div class="code-window__action-buttons-wrapper code-window__action-buttons-wrapper--content-page"> <button title="點擊複製" class="code-window__action-button code-window__action-button--copy copy-clipboard" data-copy-text="點擊複製" data-copied-text="已複製到剪貼板" data-clipboard-id="code-explorer" data-placement="bottom" > <i class="fa-kit fa-copy-example"></i> </button> <button title="全螢幕模式" class="code-window__action-button code-window__action-button--full-screen js-full-screen-code-example-modal" > <i class="fas fa-expand"></i> </button> <button title="退出全螢幕" class="code-window__action-button code-window__action-button--exit-full-screen js-exit-full-screen-code-example-modal" > <i class="fas fa-compress"></i> </button> </div> <pre class="prettyprint linenums lang-cs"><code>private async Task ScanQRCode() { // Check if there is a valid image to work with if (string.IsNullOrEmpty(qrImageSrc)) return; try { var inputBmp = AnyBitmap.FromFile(qrImageSrc); QrImageInput imageInput = new QrImageInput(inputBmp); QrReader reader = new QrReader(); IEnumerable<QrResult> results = reader.Read(imageInput); // Check if there are any results and if the first result contains text var firstResult = results.FirstOrDefault(); if (firstResult != null && !string.IsNullOrWhiteSpace(firstResult.Value.ToString())) { scannedText = firstResult.Value.ToString(); } else { scannedText = "QR value not found!"; } } catch (Exception ex) { scannedText = "Error scanning QR code: " + ex.Message; } }</code></pre> <pre class="prettyprint linenums lang-vb"><code>Private Async Function ScanQRCode() As Task ' Check if there is a valid image to work with If String.IsNullOrEmpty(qrImageSrc) Then Return End If Try Dim inputBmp = AnyBitmap.FromFile(qrImageSrc) Dim imageInput As New QrImageInput(inputBmp) Dim reader As New QrReader() Dim results As IEnumerable(Of QrResult) = reader.Read(imageInput) ' Check if there are any results and if the first result contains text Dim firstResult = results.FirstOrDefault() If firstResult IsNot Nothing AndAlso Not String.IsNullOrWhiteSpace(firstResult.Value.ToString()) Then scannedText = firstResult.Value.ToString() Else scannedText = "QR value not found!" End If Catch ex As Exception scannedText = "Error scanning QR code: " & ex.Message End Try End Function</code></pre> </div> <div class="code_window_bottom"> <span class="language_selection"> <span class="ls-span">VB  </span> <span> <label class="switch"> <input type="checkbox" checked="checked"> <span class="slider round"></span> </label> </span> <span class="ls-span">C#</span> </span> </div> </div> </div> <p>最初,該方法會檢查用來保存上傳圖片路徑的 <code>qrImageSrc</code> 變量是否不為空。 此檢查可確保在繼續執行之前有一個有效的圖像可以使用。</p> <p>一旦確認圖像已準備好進行處理,該方法將進行 QR 碼讀取的核心功能。 這涉及幾個關鍵步驟,首先是將圖像從其存儲位置加載到適合 QR 代碼分析的格式中。 此轉換由 <code>AnyBitmap.FromFile</code> 實現(qrImageSrc)` 方法,該方法準備圖像以進行掃描過程。</p> <p>下一步涉及創建一個 <code>QrReader</code> 對象。 此物件是IronQR庫不可或缺的一部分,作為從圖像解碼QR碼的主要工具。 在 <code>QrReader</code> 實例準備就緒後,應用程式隨即進行掃描上傳的圖像。 <code>reader.Read(圖像輸入)負責此操作的</code> function 方法地搜索圖像中的QR碼並提取其數據。</p> <p>掃描結果存儲在 <code>IEnumerable</code> 中<qrresult><code>集合。 然後對此集合進行檢查以找出第一個 QR code 結果。 如果檢測到 QR 碼,並且它包含可讀取的文字,該文字將被捕獲並存儲在</code>scannedText` 變數中。 然而,在找不到 QR 碼或不包含文本的情況下,應用程式會設定一條預設訊息來告知使用者未檢測到 QR 值。</p> <p>成功掃描 QR 碼後,文字字串會顯示在文字輸入欄位中,這要歸功於 Blazor 的雙向數據綁定功能。 這是通過將 <code>scannedText</code> 變數綁定到文字輸入元素來實現的。 輸入欄位設置為禁用,變為只讀。 此設計選擇的重點在於將使用者的互動集中於查看結果並進行複製,而非編輯內容。</p> <p>整個掃描過程封裝在 try-catch 區塊中,以防在掃描操作期間發生任何意外錯誤。 這可能包括與圖像文件格式相關的問題或在讀取過程中發生的意外錯誤。 如果發生異常,將會被捕獲,生成錯誤訊息並顯示給用戶。 此方法不僅有助於識別問題,還保持與用戶的透明度,從而提高應用程序的可靠性。</p> <h3 id="anchor-36-49">複製結果</h3> <p>要啟用複製到剪貼板的功能,需要在 <strong><code>_Host.cshtml</code></strong> 檔案中定義一個名為 <code>copyTextToClipboard</code> 的 JavaScript 函式。這個腳本是一種既簡單又有效的方式來與剪貼板互動:</p> <pre class='naked-code' style='display:none;'><code class="language-js"><script> function copyTextToClipboard(text) { navigator.clipboard.writeText(text).then(function () { console.log('Copying to clipboard was successful!'); }, function (err) { console.error('Could not copy text: ', err); }); } </script></code></pre> <div class="code-content code-content-inner" > <div class="code_window" > <div class="code_window_content"> <div class="code-window__action-buttons-wrapper code-window__action-buttons-wrapper--content-page"> <button title="點擊複製" class="code-window__action-button code-window__action-button--copy copy-clipboard" data-copy-text="點擊複製" data-copied-text="已複製到剪貼板" data-clipboard-id="code-explorer" data-placement="bottom" > <i class="fa-kit fa-copy-example"></i> </button> <button title="全螢幕模式" class="code-window__action-button code-window__action-button--full-screen js-full-screen-code-example-modal" > <i class="fas fa-expand"></i> </button> <button title="退出全螢幕" class="code-window__action-button code-window__action-button--exit-full-screen js-exit-full-screen-code-example-modal" > <i class="fas fa-compress"></i> </button> </div> <pre class="prettyprint linenums lang-javascript"><code><script> function copyTextToClipboard(text) { navigator.clipboard.writeText(text).then(function () { console.log('Copying to clipboard was successful!'); }, function (err) { console.error('Could not copy text: ', err); }); } </script></code></pre> </div> <div class="code_window_bottom"> <span class="pull-right"><span class="ls-span" style='font-weight: 600'>JAVASCRIPT</span> </div> </div> </div> <p>此功能接受一個文字參數,即要複製的文字。 它使用了 <code>navigator.clipboard.writeText</code> 方法,一種與剪貼簿互動的現代方法。 此方法因其簡單性和符合網路標準而受到青睞。 它被設計為在成功複製後在控制台記錄成功消息,有助於偵錯並確保功能順利運行。 如果發生錯誤,錯誤訊息將記錄到控制台,提供有關操作過程中遇到的任何問題的見解。</p> <p><code>CopyToClipboard</code> 方法位於 index.razor 的 <code>@code</code> 部分,作為 Blazor 應用程式和 JavaScript 函數之間的橋樑。 按鈕在使用者介面中觸發此方法的點擊。 啟動後,它會使用 Blazor 的 JavaScript InterOp 功能調用 <code>copyTextToClipboard</code> JavaScript 函數。 <code>scannedText</code> 作為參數傳遞給此函數,從而有效地將文本複製到用戶的剪貼簿。</p> <pre class='naked-code'><code class="language-cs">private async Task CopyToClipboard() { await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText); }</code></pre> <div class="code-content code-content-inner"> <div class="code_window" > <div class="language-selection__content-page-wrapper"> </div> <div class="code_window_content"> <div class="code-window__action-buttons-wrapper code-window__action-buttons-wrapper--content-page"> <button title="點擊複製" class="code-window__action-button code-window__action-button--copy copy-clipboard" data-copy-text="點擊複製" data-copied-text="已複製到剪貼板" data-clipboard-id="code-explorer" data-placement="bottom" > <i class="fa-kit fa-copy-example"></i> </button> <button title="全螢幕模式" class="code-window__action-button code-window__action-button--full-screen js-full-screen-code-example-modal" > <i class="fas fa-expand"></i> </button> <button title="退出全螢幕" class="code-window__action-button code-window__action-button--exit-full-screen js-exit-full-screen-code-example-modal" > <i class="fas fa-compress"></i> </button> </div> <pre class="prettyprint linenums lang-cs"><code>private async Task CopyToClipboard() { await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText); }</code></pre> <pre class="prettyprint linenums lang-vb"><code>Private Async Function CopyToClipboard() As Task Await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText) End Function</code></pre> </div> <div class="code_window_bottom"> <span class="language_selection"> <span class="ls-span">VB  </span> <span> <label class="switch"> <input type="checkbox" checked="checked"> <span class="slider round"></span> </label> </span> <span class="ls-span">C#</span> </span> </div> </div> </div> <h3 id="anchor-36-49">執行應用程式</h3> <p>運行項目後,用戶將看到以下清晰簡單的介面。 初始畫面顯著顯示了QR Code掃描器模組。 此模組包含一個按鈕,用於上傳 QR 碼圖像文件。(選擇檔案)並啟動掃描過程(掃描QR碼). 最初,未選擇任何檔案,掃描區域是空白的,等待使用者輸入。</p> <p><img src="/static-assets/barcode/blog/blazor-qr-code-scanner-tutorial/blazor-qr-code-scanner-tutorial-6.webp" alt="如何創建 Blazor QR 碼掃描器:圖 6 - 專案初次執行結果" loading="lazy" class="img-responsive add-shadow img-popup" width="1920" height="1032" /></p> <p>使用者透過「選擇檔案」按鈕選擇並上傳 QR 碼圖片,現在此按鈕會顯示所選檔案的名稱。(例如,'qrvalue.png'</p> <p>). 上傳的 QR 碼顯示在介面上的指定區域,確認圖像已準備好進行掃描。</p> <p><img src="/static-assets/barcode/blog/blazor-qr-code-scanner-tutorial/blazor-qr-code-scanner-tutorial-7.webp" alt="如何建立 Blazor QR 碼掃描器:圖 7 - 使用者輸入 QR 碼的結果" loading="lazy" class="img-responsive add-shadow img-popup" width="774" height="777" /></p> <p>當使用者點擊「掃描 QR Code」按鈕後,應用程式會處理該圖片。 如果掃描成功,QR碼中的文本會顯示在圖像下方。 在這種情況下,掃描結果(<code>'<https://ironsoftware.com/csharp/qr/>'</code>)是一個 URL,表示當用 QR 讀碼器掃描時,QR 碼將用戶引導至的位置。 結果旁邊會顯示複製按鈕,允許使用者輕鬆地將掃描的文字複製到剪貼簿以便進一步使用。</p> <p><img src="/static-assets/barcode/blog/blazor-qr-code-scanner-tutorial/blazor-qr-code-scanner-tutorial-8.webp" alt="如何建立 Blazor QR 碼掃描器:圖 8 - 這顯示了 QR 碼中的文字和複製按鈕" loading="lazy" class="img-responsive add-shadow img-popup" width="819" height="865" /></p> <h2 id="anchor-36-49">結論</h2> <p><img src="/static-assets/barcode/blog/blazor-qr-code-scanner-tutorial/blazor-qr-code-scanner-tutorial-9.webp" alt="如何創建 Blazor QR 碼掃描器:圖 9" loading="lazy" class="img-responsive add-shadow img-popup" width="1479" height="861" /></p> <p>總結來說,將 IronQR 整合到 Blazor Server 應用程式的過程既順暢又有效,從而提供了一個 QR 碼掃描解決方案。 自專案設立之初到實現掃描功能為止,得益於 IronQR 強大的處理能力與 Blazor 動態 UI 呈現的結合,操作上回應快速且易於使用。 從設置環境到部署的過程,強調了此整合在實際應用中的實用性和有效性。 雖然 IronQR 擅長 QR 碼,但對於需要掃描條碼功能的專案,<a href="/zh-hant/csharp/barcode/" target="_blank" rel="nofollow noopener noreferrer">IronBarcode</a>是一個理想的選擇,提供類似的便利性和整合水平。</p> <p>IronQR 提供一個<a href="#trial-license" data-modal-id="trial-license" class="js-modal-open">免費試用</a>讓開發人員在購買前探索其功能。 如需在生產中擴展使用及存取其所有專業功能,IronQR 的授權價格起始於 $749。</p> </div> <div class="author-details" id="author"> <div class="row"> <div class="col-sm-2"> <img loading="lazy" src="/img/how-tos/authors/regan.png" alt="里根普恩" class="img-responsive add-shadow" width="512" height="512" /> </div> <div class="col-sm-10"> <h3>里根普恩</h3> <h4>軟體工程師</h4> <p class="author-connections"> <a href="https://linkedin.com/in/regan-pun"><i class="fa-brands fa-linkedin"></i> <strong>LinkedIn</strong></a> </p> Regan 畢業於雷丁大學,擁有電子工程學士學位。在加入 Iron Software 之前,他的工作角色讓他專注於單一任務;而他在 Iron Software 工作中最喜歡的是他所能承擔的工作範圍,無論是增加銷售價值、技術支持、產品開發或市場營銷。他喜歡了解開發人員如何使用 Iron Software 庫,並利用這些知識不斷改進文檔和開發產品。 </div> </div> </div> <div class="blog_end_line"></div> <div class="blog_bottom_nav"><div class="blog_bottom_nav row row-cols-2"><div class="text-start text-truncate"><a href="/zh-hant/csharp/barcode/blog/using-ironbarcode/csharp-print-barcode-tutorial/" class="link">< 上一頁</a><br>如何在C#中打印條形碼</div><div class="text-end text-truncate"><a href="/zh-hant/csharp/barcode/blog/using-ironbarcode/vb-net-print-barcode-label-tutorial/" class="link">下一個 ></a><br>如何在 VB .NET 中列印條碼標籤</div></div></div> <div class="feedback_form"> <!-- Typeform START --> <div class="article-feedabck__wrapper" id="anchor-improve-the-article" data-tf-widget="zrOqRbmz" data-tf-iframe-props="title=Article feedback" data-tf-medium="snippet" data-tf-hidden="source=https://ironsoftware.com/zh-hant/csharp/barcode/blog/using-ironbarcode/blazor-qr-code-scanner-tutorial" data-tf-disable-auto-focus ></div> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { var selector = "#anchor-improve-the-article"; document.onElementViewportIntersect(selector, function() { importScript("https://embed.typeform.com/next/embed.js", true); }) }) </script> <!-- Typeform END --> </div> </div> <div class="col-12 col-md-4 right_column"> <div class="h-100"> <div class="sticky-md-top z-0 specific_sticky_height"> <div class="block_on_this_page"> <div id="blog_right_scrollspy_menu" class="menu_wrapper"> <h2 class="mb-3">本頁內容</h2> <ul class="blog_post_on_this_page"> <li> <a href="#anchor-36-49" class=""><span>介紹</span></a> <ul class=""> <li class=""> <a href="#anchor-36-49"><span>理解基礎知識</span></a> </li> </ul> </li> <li> <a href="#anchor-36-49-blazor-qr-36-49" class=""><span>如何建立 Blazor QR 碼掃描器</span></a> </li> <li> <a href="#anchor-36-49" class=""><span>設定環境</span></a> <ul class=""> <li class=""> <a href="#anchor-36-49-blazor-36-49"><span>建立一個新的 Blazor 伺服器應用程式</span></a> </li> <li class=""> <a href="#anchor-36-49ironqr36-49"><span>安裝IronQR庫</span></a> </li> </ul> </li> <li> <a href="#anchor-36-49-qr-36-49" class=""><span>實現 QR 碼掃描</span></a> <ul class=""> <li class=""> <a href="#anchor-36-49"><span>構建使用者介面</span></a> </li> <li class=""> <a href="#anchor-36-49css36-49site-css"><span>網站中的CSS樣式在site.css</span></a> </li> <li class=""> <a href="#anchor-36-49"><span>處理文件上傳</span></a> </li> <li class=""> <a href="#anchor-36-49-qr-36-49"><span>掃描 QR 碼</span></a> </li> <li class=""> <a href="#anchor-36-49"><span>複製結果</span></a> </li> <li class=""> <a href="#anchor-36-49"><span>執行應用程式</span></a> </li> </ul> </li> <li> <a href="#anchor-36-49" class=""><span>結論</span></a> </li> </ul> </div> </div> <div> <div class="nuget-sidebar-wrapper nuget-sidebar-wrapper--right-sidebar nuget-variant-3"> <div class="nuget-sidebar-header-block"> <div class="nuget-sidebar-header-block__logo-block"> <a href="#" target="_blank"><img loading="lazy" src="/img/nuget.blue.svg" alt="從NuGet 免費用於開發" width="38" height="38" data-modal-id="trial-license-after-download" class="js-modal-open"></a> </div> <div class="nuget-sidebar-header-block__text-block"> <p class="nuget-sidebar-header-block__text-block__big-text"> <a href="#" target="_blank" data-modal-id="trial-license-after-download" class="js-modal-open"> 安裝與 <span class="nuget-sidebar-header-block__text-block__big-text--blue">NuGet</span> <span class="nuget-sidebar-header-block__text-block__small-text">nuget.org/packages/<span class="text-block__small-text--inline-block">BarCode</span></span> </a> </p> </div> </div> <div class="nuget-sidebar-cli vwo-nuget-copy vwo-nuget-copy--ironbarcode" data-bs-custom-class="tooltipCopyToClipboard"> <div class="nuget-sidebar-cli__command"> <p class="nuget-sidebar-cli__command__text"> PM > <span class="js-nuget-sidebar-cli__command__text">Install-Package BarCode</span> </p> </div> <div class="nuget-sidebar-cli__copy-block"> <span class="fas copy-icon-white"></span> </div> </div> </div> </div> <div class="join_bug_bounty"> <h2>報告問題</h2> <ul class="list-unstyled rt-list"> <li class="list-unstyled__item-flex-align-items-center"><i class="fa-regular fa-pen-to-square"></i>  <a href="#anchor-improve-the-article">加入我們的漏洞獎勵計劃以獲得 Iron Swag</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> <section> <div id="page-home-section-ready-started" class="ready-started section_bg-blue ready-started--bottom" > <div class="container-fluid"> <h2 class="section-title"> <span> 準備開始了嗎? </span> <span class="sub-title-grey"> <strong>版本:</strong> 2025.2 剛剛發布 </span> </h2> <!-- NuGet Download CTA Start --> <a id="page-home-section-ready-started-cta-button" class="btn btn-red btn--twolines btn-red--margin-left-right ready-started__cta js-modal-open" data-modal-id="trial-license-after-download" href="https://www.nuget.org/packages/BarCode/" target="_blank" > <i class="nuget-icon-white2" aria-hidden="true" ></i> 免費 NuGet 下載 <span class="header-navbar-white-cta-button--total-download"> <span class="vwo-cta-total-downloads-wording">總下載次數:</span> 1,426,889 </span> </a> <!-- NuGet Download CTA End --> <!-- A/B dropdown button, start --> <div class="ready_started_dropdown_button_2501__wrapper vwo_ab_test_new_download_button_in_ready_started"> <a class="download_button_2410__button js-modal-open" href="https://www.nuget.org/packages/BarCode/" data-modal-id="trial-license-after-download" target="_blank"> <span class="icon_main"><i class="fa-kit fa-nuget"></i></span> <span class="text">免費開始</span> <span class="icon_arrow"><i class="fa-solid fa-caret-down"></i></span> </a> <div class="download_button_2410__content"> <div class="download_button_2410__menu"> <a aria-label="" class="js-modal-open" target="_blank" href="https://www.nuget.org/packages/BarCode/" data-modal-id="trial-license-after-download"> <span class="download_button_2410__icon_wrapper"><i class="fa-kit fa-nuget"></i></span> NuGet 下載 </a> <a aria-label="" class="js-modal-open--downloading openWebsiteWithDataURL" data-url="/csharp/barcode/packages/IronBarCode.zip" data-modal-id="trial-license-after-download"> <span class="download_button_2410__icon_wrapper"><i class="fa fa-download"></i></span> DLL 下載 </a> <a href="#trial-license" class="the_trial" aria-label="" data-bs-toggle="modal" data-bs-target="#trial-license"> <span class="download_button_2410__icon_wrapper"><i class="fa-solid fa-key"></i></span>開始免費試用 </a> </div> </div> </div> <!-- A/B dropdown button, end --> <a id="page-home-section-ready-started-cta-link" class="view-all-license-btn" href="/zh-hant/csharp/barcode/licensing/" > 查看許可證 > </a> </div> </div> </section> <section class="bifrost"></section> </main> <div class="modal fade img-popup-modal" id="img-popup-modal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog" data-bs-dismiss="modal"> <div class="modal-content" > <div class="modal-title"> <!--<button type="button" class="close" data-bs-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>--> <i data-bs-dismiss="modal" aria-hidden="true" class="fas fa-times slide-out-close"></i> </div> <div class="modal-body"> <img class="img-popup-fullsize" loading="lazy" src="" alt=" related to 如何建立 Blazor QR 碼掃描器"> <p class="img-popup-caption"></p> </div> </div> </div> </div> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { var element = document.querySelector("#img-popup-modal"); document.onElementViewportIntersect(element, function() { importIfNotExists(["image-popup.js", "modals/image-popup.css"], debug()); }); }) </script> <div class="modal" id="download-modal"> <div class="modal-dialog products-download dm-IronBarcode ironbarcode"> <div class="modal-content"> <div class="modal-header"> <i data-bs-dismiss="modal" aria-hidden="true" class="fas fa-times slide-out-close"></i> </div> <div class="modal-body"> <div class="dm-col-left"> <div class="products-title">免費試用 IronBarcode</div> <div class="subtitle">在五分鐘內完成設置</div> <div class="image-box"> <img class="img-responsive" loading="lazy" src="/img/license-types/icon-lightbulb.svg" alt="Icon Lightbulb related to 如何建立 Blazor QR 碼掃描器"> </div> </div> <div class="dm-col-right"> <div class="row"> <div class="col-md-6"> <div class="js-modal-open product-item nuget vwo-nuget-copy" data-modal-id="trial-license-after-download" > <div class="product-section" style="padding: 33px 25px 28px;"> <div class="row"> <div class="col-lg-2 product-image"> <img class="img-responsive add-shadow" loading="lazy" src="/img/nuget-logo.svg" alt="用於 PDF 的 C# NuGet 程式庫" /> </div> <div class="col-lg-10 product-info"> <div class="products-title">安裝與 <span>NuGet</span></div> <div class="subtitle"><strong>版本:</strong> 2025.2</div> </div> </div> <div class="js-open-modal-ignore copy-nuget-section" data-toggle="tooltip" data-copy-text="點擊複製" , data-copied-text="已複製到剪貼板" data-placement="top" title="點擊複製"> <div class="copy-nuget-row vwo-nuget-copy"> <pre class="install-script">Install-Package BarCode</pre> <div class="copy-button"> <button class="btn btn-default copy-nuget-script" type="button" data-toggle="popover" data-placement="top" data-content="已複製到剪貼板" aria-label="複製套件管理器命令" data-original-title="點擊複製" title="點擊複製"> <span class="fas copy-icon-white"></span> </button> </div> </div> </div> <div class="nuget-link"> nuget.org/packages/BarCode/ </div> </div> <div class="product-section"> <ol class="product-description"> <li><span>在方案總管中,右鍵點擊參考,管理 NuGet 套件</span></li> <li><span>選擇瀏覽並搜尋 "IronBarcode"</span></li> <li><span>選擇套件並安裝</span></li> </ol> </div> </div> </div> <div class="col-md-6"> <div class="js-modal-open product-item dll" data-modal-id="trial-license-after-download" onclick="location.href='/csharp/barcode/packages/IronBarCode.zip';"> <div class="product-section"> <div class="row"> <div class="col-lg-2 product-image"> <img class="img-responsive add-shadow" loading="lazy" src="/img/dll-img.png" alt="C# PDF DLL" /> </div> <div class="col-lg-10 product-info"> <div class="products-title">下載 <span>DLL</span></div> <div class="subtitle"><strong>版本:</strong> 2025.2</div> </div> </div> <div class="download-dll-section"> <a class="btn btn-red download-library-dropdown dark-version" href="javascript:void(0)" data-toggle="tooltip" data-placement="bottom" data-html="true" title="" ><i class="fas fa-download"></i> 立即下載</a> <div class="subtitle">手動安裝到您的項目中</div> </div> </div> <div class="product-section"> <ol class="product-description"> <li><span>下載並解壓縮 IronBarcode 到 ~/Libs 等位置在您的解決方案目錄中</span></li> <li><span>在 Visual Studio 解決方案總管中,右鍵點擊「參考」。選擇「瀏覽」,然後選擇「IronBarCode.dll」</span></li> </ol> </div> </div> </div> </div> <div class="licensing-link"> 來自授權 <a href="/zh-hant/csharp/barcode/licensing/" target="__blank">$749</a> </div> </div> </div> <div class="dm-modal-footer"> <div class="dm-col-left"> </div> <div class="dm-col-right"> <p class="helpscout-text">有問題嗎? <a href="#live-chat-support">聯繫我們</a> 與我們的開發團隊合作。</p> </div> </div> </div> </div> </div> <script> document.addEventListener("DOMContentLoaded", function() { var selector = document.querySelector("#download-modal"); document.onElementViewportIntersect(selector, function() { importModal(["modals/download.css"], "download-modal", debug()); }); }); </script> <div class="modal" id="trial-license-after-download" tabindex="-1" data-bs-backdrop="true" data-form-id="804d04bc-270a-4a99-884f-8be444f12e46" data-ironproduct-key="ironbarcode" data-js-modal-id="trial-license-after-download" > <div class="modal-config" data-for-product="ironbarcode"> <span class="trial-license-inactive-timeout" data-trial-license-inactive-timeout="15">15</span> <span class="trial-license-inactive-timeout-interval" data-trial-license-inactive-timeout-interval="1000">1000</span> <span class="trial-license-reset-state-in-days" data-trial-license-reset-state-in-days="1">1</span> </div> <div class="modal-dialog"> <div class="modal-content modal-content_border-0 modal-content_padding-0"> <div class="trial-license-after-download-modal__status__css-loaded" style="display:none; font-size:0px;"><!-- a place holder, when css completely load the font-size will change to 1px; then it will trigger js to make modal visible --></div> <div class="modal-header"> <i class="slide-out-close-bold" data-bs-dismiss="modal" aria-hidden="true" ></i> </div> <div class="modal-body modal-body_padding-0"> <div class="trial-license trial-license_light"> <div class="trial-license__info_2410 d-none d-lg-block"> <div class="bg_product_logo d-none d-xl-block ironbarcode"><!-- bg-product-logo --></div> <div class="content_wrapper pt-4 pt-lg-5"> <div class="header type_installed flex-column flex-lg-row js_control_type_installed"> <div class="header__animate_icon installed"><div class="package_icon_bg"><img class="platform_logo" src="/img/modals/new-design-2410/logo_nuget.svg" width="43" height="42" alt="Nuget Logo" loading="lazy"></div></div> <div> <h2 class="header__title text-center text-lg-start"> 現在您已使用 NuGet 安裝 </h2> </div> </div> <div class="header type_downloading flex-column flex-lg-row js_control_type_downloading"> <div class="header__animate_icon downloading"></div> <div> <h2 class="header__title text-center text-lg-start"> 您的瀏覽器正在下載 <span class="header__title__product_name">IronBarcode</span> </h2> </div> </div> <h3 class="header_subtitle text-center text-lg-start type_installed">下一步:開始免費 30 天試用</h3> <p class="text-center text-lg-start">不需要信用卡</p> <ul class="highlight d-none d-lg-block"> <li><span class="icon_test"></span>Test in a live environment</li><li><span class="icon_calendar"></span>Fully-functional product</li><li><span class="icon_support"></span>24/5 technical support</li> </ul> </div> </div> <style> /* @media (min-width: 992px) { #trial-license-after-download .trial-license__action { } } */ </style> <div class="trial-license__action" style="min-height: 550px;" > <div class="trial-license__action-title" style=" " > 獲取你的免費 <strong>30天試用序號</strong> 立即。 </div> <div class="trial-license__exit-intent-form-sent-title" > 謝謝。<br>如果您想與我們的授權團隊聯絡: </div> <div id="hubspot-form__thank_you" class="hubspot-form__thank_you" > <p><section class="formright_submitted"><img loading="lazy" src="/img/icons/greencheck_in_yellowcircle.svg" width="100" height="100" alt="黃色圓圈中的綠色勾勳章"><h2>試用表格已提交<br><em>成功地</em>.</h2><p>您的試用金鑰應該在郵件中。<br>如果不是,請聯繫<br><a href="mailto:support@ironsoftware.com">support@ironsoftware.com</a></p></section></p> </div> <div id="hubspot-form__form__trial-license-after-download" class="hubspot-form__form-wrapper" > <script> document.addEventListener("DOMContentLoaded", function() { document.onElementViewportIntersect("#hubspot-form__form__trial-license-after-download", function() { function embedTrialForm() { embedCustomHubspotForm( "#hubspot-form__form__trial-license-after-download", { region: "na1", portalId: "22630553", formId: "804d04bc-270a-4a99-884f-8be444f12e46", locale: "zh_TW", onFormReady: function($form) { customizeHubspotTrialForm($form); function translateForm(form) { jQuery(form).find("input[name=email]").attr("placeholder", "您的商務電子郵件"); jQuery(form).find("input[name=firstname]").attr("placeholder", "你的名字"); jQuery(form).find("input[name=phone]").attr("placeholder", "您的手機"); jQuery(form).find("div.hs-richtext.hs-main-font-element").text("您的試用許可證將發送到此地址"); jQuery(form).find("input[type=submit]").attr("value", "獲取試用授權証書"); jQuery(form).find("input[type=submit]").on("click", function() { setTimeout(function() { jQuery(form).find("input[type=submit]").attr("value","獲取試用授權証書"); }, 50); }); } translateForm($form); }, onFormSubmitted: function($form, data) { setTimeout(function () { $(".modal.show .trial-license__action-features").hide(); $(".modal.show .hubspot-form__form-wrapper").hide(); $(".modal.show .trial-license__action-title").empty(); $(".modal.show .hubspot-form__thank_you").show().css('padding', 0); $(".modal.show .hubspot-form__thank_you .formright_submitted").show(); }, 0); } } ); } embedTrialForm(); // hbspt.forms.create({ // region: "na1", // portalId: "22630553", // formId: "804d04bc-270a-4a99-884f-8be444f12e46", // locale: "zh_TW", // onFormReady: function($form) { // customizeHubspotTrialForm($form); // // } // }); }); }); </script> </div> <div class="trial-license__exit-intent-form-sent-action-button"> <a class="btn btn-red btn-red--exit-intent-form-sent" href="https://help.ironsoftware.com/meetings/ironsoftware/schedule-a-call-with-sales" target="_blank"> <i class="fa fa-phone-alt" aria-hidden="true"></i> 預約通話 </a> </div> <div class="trial-license__exit-intent-form-sent-description"> 有問題嗎? <a href="#live-chat-support" onclick="return show_helpscout(event)">聯繫我們</a> 與我們的開發團隊合作。 </div> <div class="trial-license__action-features"> <div class="trial-license__action-features-single"> 不需要信用卡或帳戶註冊 </div> </div> </div> </div> </div> </div> </div> </div> <script> document.addEventListener("DOMContentLoaded", function() { var selector = "#trial-license-after-download"; document.onElementViewportIntersect(selector, function() { var modals = ["modals/trial-license.css"]; importModal(modals, "trial-license-after-download", debug()); }); }); </script> <div class="modal" id="trial-license-after-download-form-sent" tabindex="-1" data-bs-backdrop="true" data-form-id="804d04bc-270a-4a99-884f-8be444f12e46" data-ironproduct-key="ironbarcode" data-js-modal-id="trial-license-after-download-form-sent" > <div class="modal-config" data-for-product="ironbarcode"> <span class="trial-license-inactive-timeout" data-trial-license-inactive-timeout="15">15</span> <span class="trial-license-inactive-timeout-interval" data-trial-license-inactive-timeout-interval="1000">1000</span> <span class="trial-license-reset-state-in-days" data-trial-license-reset-state-in-days="1">1</span> </div> <div class="modal-dialog"> <div class="modal-content modal-content_border-0 modal-content_padding-0"> <div class="trial-license-after-download-form-sent-modal__status__css-loaded" style="display:none; font-size:0px;"><!-- a place holder, when css completely load the font-size will change to 1px; then it will trigger js to make modal visible --></div> <div class="modal-header"> <i class="slide-out-close-bold" data-bs-dismiss="modal" aria-hidden="true" ></i> </div> <div class="modal-body modal-body_padding-0"> <div class="trial-license trial-license_light"> <div class="trial-license__info_2410 d-none d-lg-block"> <div class="bg_product_logo d-none d-xl-block ironbarcode"><!-- bg-product-logo --></div> <div class="content_wrapper pt-4 pt-lg-5"> <div class="header type_installed flex-column flex-lg-row js_control_type_installed"> <div class="header__animate_icon installed"><div class="package_icon_bg"><img class="platform_logo" src="/img/modals/new-design-2410/logo_nuget.svg" width="43" height="42" alt="Nuget Logo" loading="lazy"></div></div> <div> <h2 class="header__title text-center text-lg-start"> 現在您已使用 NuGet 安裝 </h2> </div> </div> <div class="header type_downloading flex-column flex-lg-row js_control_type_downloading"> <div class="header__animate_icon downloading"></div> <div> <h2 class="header__title text-center text-lg-start"> 您的瀏覽器正在下載 <span class="header__title__product_name">IronBarcode</span> </h2> </div> </div> <h3 class="header_subtitle text-center text-lg-start type_installed">下一步:開始免費 30 天試用</h3> <p class="text-center text-lg-start">不需要信用卡</p> <ul class="highlight d-none d-lg-block"> <li><span class="icon_test"></span>Test in a live environment</li><li><span class="icon_calendar"></span>Fully-functional product</li><li><span class="icon_support"></span>24/5 technical support</li> </ul> </div> </div> <style> /* @media (min-width: 992px) { #trial-license-after-download-form-sent .trial-license__action { padding-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; } } */ </style> <div class="trial-license__action" style="min-height: 270px;" > <div class="trial-license__action-title" style=" " > <strong>謝謝。<br>查看您的許可選項:</strong> </div> <div class="trial-license__exit-intent-form-sent-title" > 謝謝。<br>如果您想與我們的授權團隊聯絡: </div> <div class="trial-license__action-buttons" style=" " > <a class="trial-license__action-button trial-license__action-button_red trial-license__action-button_wide" style=" " href="/zh-hant/csharp/barcode/licensing/" > <span class="trial-license__action-button-text"> 檢視授權 </span> </a> </div> <div class="trial-license__exit-intent-form-sent-action-button"> <a class="btn btn-red btn-red--exit-intent-form-sent" href="https://help.ironsoftware.com/meetings/ironsoftware/schedule-a-call-with-sales" target="_blank"> <i class="fa fa-phone-alt" aria-hidden="true"></i> 預約通話 </a> </div> <div class="trial-license__action-description trial-license__action-description_highlighted" style=" " > 有問題嗎? <!-- --><a href="#live-chat-support" >聯繫我們</a><!-- --> 與我們的開發團隊合作。 </div> <div class="trial-license__exit-intent-form-sent-description"> 有問題嗎? <a href="#live-chat-support" onclick="return show_helpscout(event)">聯繫我們</a> 與我們的開發團隊合作。 </div> </div> </div> </div> </div> </div> </div> <script> document.addEventListener("DOMContentLoaded", function() { var selector = "#trial-license-after-download-form-sent"; document.onElementViewportIntersect(selector, function() { var modals = ["modals/trial-license.css"]; importModal(modals, "trial-license-after-download-form-sent", debug()); }); }); </script> <div class="modal modal_new fade" id="trial-license" tabindex="-1" data-bs-backdrop="true" data-form-id="9abc867c-3b2e-4485-81f9-a86c6416bf52" style="" data-js-modal-id="trial-license"> <div class="modal-dialog modal-dialog-scrollable modal-fullscreen"> <div class="modal-content p-0"> <div class="modal-header"> <i class="fas slide-out-close-bold" data-bs-dismiss="modal" aria-hidden="true"></i> </div> <div class="modal-body p-0"> <div id="formtrial" class="modal_body h-100"> <div class="row h-100 g-0"> <div class="col-12 col-lg-4 d-none d-lg-block"> <div class="left"> <div class="wrapper"> <div style="flex:1; max-height:64px;"><!-- spacer --></div> <div><img src="/img/products/ironbarcode-logo-text-dotnet.svg" alt="ironbarcode_for_dotnet" class="product_logo" loading="lazy"></div> <div style="flex:1; max-height:104px;""><!-- spacer --></div> <section class="title"> <p class="h1">免費開始</p> <p>不需要信用卡</p> </section> <div style="flex:1; max-height:64px;"><!-- spacer --></div> <div> <section class="content"> <article> <h2>在實際環境中測試</h2> <p>在生產環境中測試無浮水印。<br>在任何需要的地方都能運作。</p> <div class="floating_icon"><img loading="lazy" src="/img/modals/trial-license-new/bullet_test.svg" width="24" alt="bullet_test"></div> </article> <article> <h2>全功能產品</h2> <p>獲得30天完全功能的產品。<br>幾分鐘內即可啟動並運行。</p> <div class="floating_icon"><img loading="lazy" src="/img/modals/trial-license-new/bullet_calendar.svg" width="24" alt="bullet_calendar"></div> </article> <article> <h2>24/5技術支援</h2> <p>試用產品期間完全訪問我們的支援工程團隊</p> <div class="floating_icon"><img loading="lazy" src="/img/modals/trial-license-new/bullet_support.svg" width="24" alt="bullet_support"></div> </article> </section> </div> <div class="modal_new_trial__support_team"> <img class="lazy" width="64" height="64" aria-label="" src="/img/support-team/support-team-member-6.webp" loading="lazy" alt="Support Team Member 6 related to 如何建立 Blazor QR 碼掃描器"> <img class="lazy" width="64" height="64" aria-label="" src="/img/support-team/support-team-member-3.webp" loading="lazy" alt="Support Team Member 3 related to 如何建立 Blazor QR 碼掃描器"> <img class="lazy" width="64" height="64" aria-label="" src="/img/support-team/support-team-member-14.webp" loading="lazy" alt="Support Team Member 14 related to 如何建立 Blazor QR 碼掃描器"> <img class="lazy" width="64" height="64" aria-label="" src="/img/support-team/support-team-member-4.webp" loading="lazy" alt="Support Team Member 4 related to 如何建立 Blazor QR 碼掃描器"> <img class="lazy" width="64" height="64" aria-label="" src="/img/support-team/support-team-member-2.webp" loading="lazy" alt="Support Team Member 2 related to 如何建立 Blazor QR 碼掃描器"> </div> <div style="flex:1"></div> </div> </div> </div> <div class="col-12 col-lg-8"> <div class="right"> <div class="wrapper"> <div style="flex:1; max-height:144px; min-height:32px;"><!-- spacer --></div> <div class="d-block d-lg-none text-center px-4"> <img loading="lazy" src="/img/products/ironbarcode-logo-text-dotnet.svg" alt="ironbarcode_for_dotnet" class="product_logo"> </div> <div class="d-block d-lg-none" style="height:24px;"></div> <div class="right_title"><h2>獲取你的免費 <em class="visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline">30天試用序號</em> 立即。</h2></div> <div style="flex:1; max-height:24px; min-height:16px;"><!-- spacer --></div> <div style="height:6px; user-select:none;"> <div class="hubspot_form--new_trial__progress_bar progress mx-auto" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="display:none; height:6px; width:240px; background-color:#E7EEF0;"> <div class="progress-bar" style="width:50%; background-color:#63C1A0;"></div> </div> </div> <div style="flex:1; max-height:32px; min-height:16px;"><!-- spacer --></div> <section class="formright"> <script> // 2step won test, so we promoted it enabledTwoStepTrialForm = true; var trialLicenseNewHbsptOptions_formTwoID = "febf5e33-1edd-45f9-b9b0-6ead75fb1b9a"; // enabledNewTelephoneForm = true; document.addEventListener("DOMContentLoaded", function() { var selector = document.querySelector("#trial-license section.formright"); document.onElementViewportIntersect(selector, function() { importModal(["modals/trial-license.css","modals/trial-license-new.css"], "trial-license", debug(), function() { // 1st form var trialLicenseNewHbsptOptions = { region: "na1", portalId: "22630553", formId: "9abc867c-3b2e-4485-81f9-a86c6416bf52", locale: "zh_TW", target: "div.modal#trial-license section.formright .hubspot_form--new_trial__place_holder", cssClass: "", formInstanceId: "", onFormReady: function ($form) { function translateForm(form) { jQuery(form).find("input[name=email]").attr("placeholder", "您的商務電子郵件"); jQuery(form).find("input[name=firstname]").attr("placeholder", "你的名字"); jQuery(form).find("input[name=phone]").attr("placeholder", "您的手機"); jQuery(form).find("div.hs-richtext.hs-main-font-element").text("您的試用許可證將發送到此地址"); jQuery(form).find("input[type=submit]").attr("value", "獲取試用授權証書"); jQuery(form).find("input[type=submit]").on("click", function() { setTimeout(function() { jQuery(form).find("input[type=submit]").attr("value","獲取試用授權証書"); }, 50); }); } translateForm($form); if (typeof enabledNewTelephoneForm !== 'undefined' && enabledNewTelephoneForm === true) { customizeHubspotTrialForm($form); } /* tooltipError, start */ const errorListenInputFields = $form.find('input:not([type="hidden"], [type="submit"])'); $(errorListenInputFields).each((index, elem) => { HSFormErrorObserver.observe(elem, { attributes: true }); }); /* tooltipError, end */ }, onFormSubmitted: function ($form, data) { trialLicenseNewHbsptSubmitted(); } }; // hide the default telephone via CSS no JS if (typeof enabledNewTelephoneForm !== 'undefined' && enabledNewTelephoneForm === true) { trialLicenseNewHbsptOptions.cssClass = trialLicenseNewHbsptOptions.cssClass + ' customHSFormHideDefaultTelephone'; } /* settings of the 2nd form */ if (typeof window.enabledTwoStepTrialForm !== 'undefined' && window.enabledTwoStepTrialForm === true) { var trialLicenseNewHbsptOptions_formTwo = { region: "na1", portalId: "22630553", formId: trialLicenseNewHbsptOptions_formTwoID, locale: "zh_TW", cssClass: "trialFormTwo", onFormReady: function ($form) { function translateForm(form) { jQuery(form).find("input[name=email]").attr("placeholder", "您的商務電子郵件"); jQuery(form).find("input[name=firstname]").attr("placeholder", "你的名字"); jQuery(form).find("input[name=phone]").attr("placeholder", "您的手機"); jQuery(form).find("div.hs-richtext.hs-main-font-element").text("您的試用許可證將發送到此地址"); jQuery(form).find("input[type=submit]").attr("value", "獲取試用授權証書"); jQuery(form).find("input[type=submit]").on("click", function() { setTimeout(function() { jQuery(form).find("input[type=submit]").attr("value","獲取試用授權証書"); }, 50); }); } translateForm($form); }, onFormSubmitted: function ($form, data) { window._vis_opt_queue = window._vis_opt_queue || []; window._vis_opt_queue.push(function() {_vis_opt_goal_conversion(233);}); // Trigger HubSpot goal _hsq.push([ 'trackCustomBehavioralEvent', { name: "pe22630553_second_trial_form_submitted", properties: { // give each property a value so we know what they mean second_trial_form_submitted: null }, }]) trialLicenseNewHbsptSubmitted(); $('.hubspot_form--new_trial__progress_bar').hide(); }, target: ".hubspot_form--new_trial__place_holder--second_form", inlineMessage: "<div class=\"d-none\"></div>", } embedCustomHubspotForm(selector, trialLicenseNewHbsptOptions_formTwo); /* override 1st form, start */ trialLicenseNewHbsptOptions.submitText = "Continue"; trialLicenseNewHbsptOptions.submitButtonClass = "hs-button primary large arrow_right"; trialLicenseNewHbsptOptions.inlineMessage = "<div class=\"d-none\"></div>"; trialLicenseNewHbsptOptions.onFormSubmitted = function ($form, data) { history.pushState("", document.title, window.location.pathname + "#trial-license-form-sent"); $(".hubspot_form--new_trial__progress_bar").show(); $('.hubspot_form--new_trial__place_holder').hide(); $('.hubspot_form--new_trial__place_holder--second_form').show(); $('#hsForm_' + trialLicenseNewHbsptOptions_formTwoID + ' input[name="email"]').val(data.submissionValues.email).change(); }; /* override 1st form, end */ } embedCustomHubspotForm(selector, trialLicenseNewHbsptOptions); // prevent caching in code trialLicenseNewHbsptOptions = {}; }); }); }); </script> <div class="hubspot_form--new_trial__place_holder"></div> <div class="hubspot_form--new_trial__place_holder--second_form" style="display:none;"></div> <p class="hubspot_form--new_trial__no_required no_credit_required"><span style="display:inline-block; margin-right:10px;"><img loading="lazy" src="/img/modals/trial-license-new/bullet_checked.svg" width="14" alt="bullet_checked"></span>不需要信用卡或帳戶註冊</p> </section> <section class="formright_submitted"> <img loading="lazy" src="/img/icons/greencheck_in_yellowcircle.svg" width="100" height="100" alt="黃色圓圈中的綠色勾勳章"> <h2>試用表格已提交<br><em>成功地</em>.</h2> <p>您的試用金鑰應該在郵件中。<br>如果不是,請聯繫<br><a href="mailto:support@ironsoftware.com">support@ironsoftware.com</a></p> </section> <div style="flex:1; max-height:96px;"><!-- spacer --></div> <div class="flex-grow-1 d-block d-md-none"><!-- spacer --></div> <section class="trusted_by px-3"> <h2>受到全球數百萬工程師的信任</h2> <ul class="our_clients"><li><img class="img-fluid" loading="lazy" src="/img/modals/trial-license-new/logo_aetna_grey.svg" alt="aetna標誌"></li><li><img class="img-fluid" loading="lazy" src="/img/modals/trial-license-new/logo_wwf_grey.svg" alt="WWF標誌"></li><li><img class="img-fluid" loading="lazy" src="/img/modals/trial-license-new/logo_nasa_grey.svg" alt="nasa_logo"></li><li><img class="img-fluid" loading="lazy" src="/img/modals/trial-license-new/logo_usds_grey.svg" alt="usda_logo"></li><li><img class="img-fluid" loading="lazy" src="/img/modals/trial-license-new/logo_3m_grey.svg" alt="3m_logo"></li><li><img class="img-fluid" loading="lazy" src="/img/modals/trial-license-new/logo_tesla_grey.svg" alt="特斯拉標誌"></li></ul> </section> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script> document.addEventListener("DOMContentLoaded", function() { var selector = "#trial-license"; document.onElementViewportIntersect(selector, function() { var modals = ["modals/trial-license.css", "modals/trial-license-new.css"]; importModal(modals, "trial-license", debug()); }); }); </script> <div class="modal modal_new" id="trial-license-form-sent" tabindex="-1" data-bs-backdrop="true" data-form-id="9abc867c-3b2e-4485-81f9-a86c6416bf52" style="" data-js-modal-id="trial-license-form-sent"> <div class="modal-dialog modal-dialog-scrollable modal-fullscreen"> <div class="modal-content p-0"> <div class="modal-header"> <i class="fas slide-out-close-bold" data-bs-dismiss="modal" aria-hidden="true"></i> </div> <div class="modal-body p-0"> <div id="formtrial" class="modal_body h-100"> <div class="row h-100 g-0"> <div class="col-12 col-lg-4 d-none d-lg-block"> <div class="left"> <div class="wrapper"> <div style="flex:1; max-height:64px;"><!-- spacer --></div> <div><img src="/img/products/ironbarcode-logo-text-dotnet.svg" alt="ironbarcode_for_dotnet" class="product_logo" loading="lazy"></div> <div style="flex:1; max-height:104px;""><!-- spacer --></div> <section class="title"> <p class="h1">免費開始</p> <p>不需要信用卡</p> </section> <div style="flex:1; max-height:64px;"><!-- spacer --></div> <div> <section class="content"> <article> <h2>在實際環境中測試</h2> <p>在生產環境中測試無浮水印。<br>在任何需要的地方都能運作。</p> <div class="floating_icon"><img loading="lazy" src="/img/modals/trial-license-new/bullet_test.svg" width="24" alt="bullet_test"></div> </article> <article> <h2>全功能產品</h2> <p>獲得30天完全功能的產品。<br>幾分鐘內即可啟動並運行。</p> <div class="floating_icon"><img loading="lazy" src="/img/modals/trial-license-new/bullet_calendar.svg" width="24" alt="bullet_calendar"></div> </article> <article> <h2>24/5技術支援</h2> <p>試用產品期間完全訪問我們的支援工程團隊</p> <div class="floating_icon"><img loading="lazy" src="/img/modals/trial-license-new/bullet_support.svg" width="24" alt="bullet_support"></div> </article> </section> </div> <div class="modal_new_trial__support_team"> <img class="lazy" width="64" height="64" aria-label="" src="/img/support-team/support-team-member-6.webp" loading="lazy" alt="Support Team Member 6 related to 如何建立 Blazor QR 碼掃描器"> <img class="lazy" width="64" height="64" aria-label="" src="/img/support-team/support-team-member-3.webp" loading="lazy" alt="Support Team Member 3 related to 如何建立 Blazor QR 碼掃描器"> <img class="lazy" width="64" height="64" aria-label="" src="/img/support-team/support-team-member-14.webp" loading="lazy" alt="Support Team Member 14 related to 如何建立 Blazor QR 碼掃描器"> <img class="lazy" width="64" height="64" aria-label="" src="/img/support-team/support-team-member-4.webp" loading="lazy" alt="Support Team Member 4 related to 如何建立 Blazor QR 碼掃描器"> <img class="lazy" width="64" height="64" aria-label="" src="/img/support-team/support-team-member-2.webp" loading="lazy" alt="Support Team Member 2 related to 如何建立 Blazor QR 碼掃描器"> </div> <div style="flex:1"></div> </div> </div> </div> <div class="col-12 col-lg-8"> <div class="right"> <div class="wrapper"> <div style="flex:1; max-height:144px; min-height:32px;"><!-- spacer --></div> <div class="d-block d-lg-none text-center px-4"> <img loading="lazy" src="/img/products/ironbarcode-logo-text-dotnet.svg" alt="ironbarcode_for_dotnet" class="product_logo"> </div> <div class="d-block d-lg-none" style="height:24px;"></div> <div class="right_title"><h2>獲取你的免費 <em class="visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline">30天試用序號</em> 立即。</h2></div> <div style="flex:1; max-height:24px; min-height:16px;"><!-- spacer --></div> <div style="height:6px; user-select:none;"> <div class="hubspot_form--new_trial__progress_bar progress mx-auto" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="display:none; height:6px; width:240px; background-color:#E7EEF0;"> <div class="progress-bar" style="width:50%; background-color:#63C1A0;"></div> </div> </div> <div style="flex:1; max-height:32px; min-height:16px;"><!-- spacer --></div> <div style="margin:0 auto; width:280px;"> <div><a class="trial-license__action-button trial-license__action-button_red" style="margin:8px 0; width:100%; font-size:15px;" href="https://www.nuget.org/packages/barcode/" target="_blank"><i class="trial-license__action-button-icon nuget-icon-white2"></i><span class="trial-license__action-button-text">使用NuGet安裝</span></a></div> <div><a class="trial-license__action-button trial-license__action-button_white" style="margin:8px 0; width:100%; font-size:15px;" href="/zh-hant/csharp/barcode/licensing/"><span class="trial-license__action-button-text">檢視授權</span></a></div> </div> <div class="text-center ironbarcode_dotnet" style="margin-top:50px;"><p><span class='trial-form-sent__licensing-price-text'>來自授權<a href="/zh-hant/csharp/barcode/licensing/">$749</a>.</span>有問題嗎?<a href="/zh-hant/csharp/barcode/#live-chat-support" onclick="return window.HubSpotConversations.widget.open()">聯繫我們</a>.</p></div> <div style="flex:1; max-height:96px;"><!-- spacer --></div> <div class="flex-grow-1 d-block d-md-none"><!-- spacer --></div> <section class="trusted_by px-3"> <h2>受到全球數百萬工程師的信任</h2> <ul class="our_clients"><li><img class="img-fluid" loading="lazy" src="/img/modals/trial-license-new/logo_aetna_grey.svg" alt="aetna標誌"></li><li><img class="img-fluid" loading="lazy" src="/img/modals/trial-license-new/logo_wwf_grey.svg" alt="WWF標誌"></li><li><img class="img-fluid" loading="lazy" src="/img/modals/trial-license-new/logo_nasa_grey.svg" alt="nasa_logo"></li><li><img class="img-fluid" loading="lazy" src="/img/modals/trial-license-new/logo_usds_grey.svg" alt="usda_logo"></li><li><img class="img-fluid" loading="lazy" src="/img/modals/trial-license-new/logo_3m_grey.svg" alt="3m_logo"></li><li><img class="img-fluid" loading="lazy" src="/img/modals/trial-license-new/logo_tesla_grey.svg" alt="特斯拉標誌"></li></ul> </section> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script> document.addEventListener("DOMContentLoaded", function() { var selector = "#trial-license-form-sent"; document.onElementViewportIntersect(selector, function() { var modals = ["modals/trial-license.css", "modals/trial-license-new.css"]; importModal(modals, "trial-license-form-sent", debug()); }); }); </script> <!-- modal start --> <div class="modal fade" id="booking-demo" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-fullscreen modal-dialog-scrollable"> <div class="modal-content modal_booking_demo"> <!-- close modal button --> <button type="button" class="button_close_modal" data-bs-dismiss="modal" aria-label="Close"><img src="/img/modals/booking_demo/icon_close_modal.svg" width="20" height="20" alt="close modal button" loading="lazy"></button> <!-- modal content, start --> <div class=""> <div class="d-flex align-items-stretch vh-100"> <div class="content_left d-none d-md-flex flex-column"> <div class="product_logo_wrapper"><img class="product_logo" src="/img/products/ironbarcode-logo-text-dotnet_white-font.svg" width="1004" height="127" alt="IronBarcode" loading="lazy"></div> <div style="flex:0 1 56px;"><!-- spacer --></div> <h2>預約免費現場演示</h2> <p class="sub_title">預約30分鐘的個人演示。</p> <p class="sub_title_emphasis">無合約,無卡片信息,無承諾。</p> <div style="flex:0 1 12px;"><!-- spacer --></div> <div class="team_expert_photo_wrapper"> <img src="/img/modals/booking_demo/team_expert.webp" width="496" height="112" alt="Iron Software 產品展示團隊" class="team_expert_photo" loading="lazy"> </div> <div style="flex:0 1 40px;"><!-- spacer --></div> <div class="how_we_help"> <h3>以下是您可以期待的內容:</h3> <ul> <li><span class="d-block"><i class="far fa-check-circle"></i></span><span class="d-block flex-grow-1">我們產品及其主要功能的即時演示</span></li><li><span class="d-block"><i class="far fa-check-circle"></i></span><span class="d-block flex-grow-1">獲取專案特定的功能建議</span></li><li><span class="d-block"><i class="far fa-check-circle"></i></span><span class="d-block flex-grow-1">確保您擁有所需的所有資訊,我們已回答您的所有問題。<br>(絕無任何承諾。)</span></li> </ul> </div> </div> <div class="content_right d-flex flex-column"> <div class="d-none d-md-block" style="flex:0 0 48px;"><!-- spacer --></div> <div class="d-none d-md-block hsform_progress"> <div class="line"></div> <div class="dot step-1"></div> <div class="dot step-2"></div> <div class="text step-1">選擇時間</div> <div class="text step-2">您的資訊</div> </div> <h2 class="form_title">預約您的免費 <strong>即時演示</strong></h2> <div class="d-none d-md-block" style="height:72px;"><!-- spacer --></div> <div class="content_right__hsform_header"> <div class="text-center"> <img src="/img/modals/booking_demo/booking_badge.svg" class="img-fluid mx-auto" width="234" height="170" alt="Booking Badge related to 預約您的免費 即時演示" loading="lazy"> </div> </div> <div class="hsform_loader_wrapper"> <div class="hsform_loader"></div> </div> <div class="form_wrapper hsform_schedule_email"> <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script> <script> // iron_hsform_error_v2 (2024 DEC) // required: css group ".iron_hsform_error_v2" // required: label from hubspot var currentModalID = "#booking-demo"; var this_hsFormID = "28570e7d-08f2-41c5-ab5b-b00342515d68"; var this_hsFormSubmitText = "開始預訂"; var this_hsFormErrorTooltipMessages = { ".hs-form-field.hs-firstname": "Please input your name", ".hs-form-field.hs-email": "Please input a valid email address", ".hs-form-field.hs-phone": "A valid phone number may only contain numbers, +()-. or x", }; var this_hsFormConfig = { region: "na1", portalId: "22630553", formId: this_hsFormID, locale: 'en', submitText: this_hsFormSubmitText, cssClass: "iron_hsform_meeting iron_hsform_error_v2", onFormReady: function($form) { /* create error tooltip, start */ // alway scoped with $form // inject error element (icon and tooltip), then hide them for (var classname in this_hsFormErrorTooltipMessages) { const invalidAttr = $('<div/>', { class: 'invalid-field', 'data-toggle': 'tooltip', 'data-placement': 'top', title: this_hsFormErrorTooltipMessages[classname] }); $form.find(classname).append(invalidAttr); } // create bootstrap's tooltip inside this form only $form.find('[data-toggle="tooltip"]').tooltip(); /* create error tooltip, end */ }, onFormSubmitted: function($form, data) { $(currentModalID + ' .content_right__hsform_header').hide(); $(currentModalID + ' .hsform_schedule_email').hide(); $(currentModalID + ' .trusted_by').hide(); $(currentModalID + ' .hsform_loader_wrapper').show(); dataLayer.push({'event':'book_live_demo'}); window._vis_opt_queue = window._vis_opt_queue || []; window._vis_opt_queue.push(function() {_vis_opt_goal_conversion(234);}); setTimeout(function() { // collect email address after form submitted const email = data['submissionValues']['email']; // get data-src from next form var nextFormDataSrc = $('.hsform_schedule_meeting .meetings-iframe-container').attr('data-src'); // generate new data-src nextFormDataSrc = nextFormDataSrc + '&email=' + email // inject new data-src to next form $(currentModalID + ' .hsform_schedule_meeting .meetings-iframe-container').attr('data-src', nextFormDataSrc); // call next form manually after update data-src $.getScript('https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js', function() { $(currentModalID + ' .hsform_loader_wrapper').hide(); $(currentModalID + ' .hsform_schedule_meeting').show(); }); }, 0); } }; // create hsform hbspt.forms.create(this_hsFormConfig); </script> <script type="text/javascript"> /* for form progress, start */ var hsMeetingFormActivated = false; window.addEventListener("message", function(event) { // console.log(event); if (event.origin == "https://meetings.hubspot.com" && event.data == "readyForConsentListener" && hsMeetingFormActivated == false) { // console.log('>> first meeting form displaying'); hsMeetingFormActivated = true; $(currentModalID + ' .hsform_progress').css("visibility", "visible"); $(currentModalID + ' .hsform_progress .step-1.dot').addClass('active'); $(currentModalID + ' .hsform_progress .step-1.text').addClass('active'); } if (event.origin == "https://meetings.hubspot.com" && event.data != "readyForConsentListener" && hsMeetingFormActivated) { // console.log('>> second meeting form displaying') $(currentModalID + ' .hsform_progress .step-1.dot').addClass('completed'); $(currentModalID + ' .hsform_progress .step-1.dot').html('<i class="fas fa-check"></i>'); $(currentModalID + ' .hsform_progress .step-1.text').addClass('completed'); $(currentModalID + ' .hsform_progress .step-2.dot').addClass('active'); $(currentModalID + ' .hsform_progress .step-2.text').addClass('active'); $(currentModalID + ' .hsform_progress .line').addClass('active'); } if (event.origin == "https://meetings.hubspot.com" && event.data.meetingBookSucceeded && hsMeetingFormActivated) { // console.log('>> meeting form submitted') $(currentModalID + ' .hsform_progress .step-2.dot').addClass('completed'); $(currentModalID + ' .hsform_progress .step-2.dot').html('<i class="fas fa-check"></i>'); $(currentModalID + ' .hsform_progress .step-2.text').addClass('completed'); } }); /* for form progress, end */ </script> </div> <div class="hsform_schedule_meeting"> <!-- Start of Meetings Embed Script --> <div class="meetings-iframe-container" data-src="https://help.ironsoftware.com/meetings/ironsoftware/demo?embed=true"></div> <!-- End of Meetings Embed Script --> </div> <div style="flex:0 0 24px;"><!-- spacer --></div> <div style="flex:0 1 98px;"><!-- spacer --></div> <div class="trusted_by"> <h3>獲得全球超過200萬名工程師的信賴</h3> <div><img src="/img/modals/booking_demo/trusted_by_logos.webp" width="552" height="97" alt="Iron Software 的客戶標誌" class="img-fluid" loading="lazy"></div> </div> </div> </div> </div> <!-- modal content, end --> </div> </div> </div> <script type="text/javascript"> var modalSelector = document.querySelector("#booking-demo"); document.addEventListener("DOMContentLoaded", function() { document.onElementViewportIntersect(modalSelector, function() { importModal(["modals/booking_demo.css"], "booking-demo", debug()); }); }); </script> <!-- modal end --> <!-- Full Width Code Example Modal START --> <div class="modal full-width-code-example-modal" tabindex="-1" id="fullWidthCodeExample" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button title="Close" data-bs-dismiss="modal" aria-hidden="true" class="full-width-code-example-modal__close-button" > <i class="fas fa-times" data-bs-dismiss="modal" aria-hidden="true"></i> </button> </div> <div class="modal-body"></div> </div> </div> </div> <script> document.addEventListener("DOMContentLoaded", function() { var copyButtonSibling = null; $(".js-full-screen-code-example-modal").click(function(event) { copyButtonSibling = $(this).siblings('.copy-clipboard'); let copyHoverVal = $(this).siblings(".copy-clipboard").attr('title'); let dataCopyHoverVal = $(this).siblings(".copy-clipboard").attr('data-original-title'); let codeExampleContent = $(this).closest(".code-content").clone(true); codeExampleContent = codeExampleContent.length > 0 ? codeExampleContent : $(this).closest(".code-explorer__content").clone(true); //code-explorer__content if (codeExampleContent.length > 0) { $("#fullWidthCodeExample .modal-body").html(codeExampleContent); $("#fullWidthCodeExample").modal("show"); $("#fullWidthCodeExample .copy-clipboard").attr('title', dataCopyHoverVal != '' ? dataCopyHoverVal : 'Click to copy'); } }); $(".js-exit-full-screen-code-example-modal, .full-width-code-example-modal__close-button").click(function() { copyButtonSibling.attr('title', $(this).siblings('.copy-clipboard').attr('title')); $("#fullWidthCodeExample").modal("hide"); }); }); document.addEventListener("DOMContentLoaded", function() { var selector = "div#fullWidthCodeExample.full-width-code-example-modal.modal"; $(selector).css("opacity", "0"); document.onElementViewportIntersect(selector, function() { importModal(["modals/code-examples.css"], "fullWidthCodeExample", debug(), function() { $(selector).css("opacity", "1"); }, 2000); }); }); </script> <!-- Full Width Code Example Modal END --> <div id="footer-sticky" class="js-search-offset-block fixed-support-bar js-hide-footer-on-scroll js-modal-open" data-modal-id="trial-license" > <div class="support-text"> <span class="support-text__full-power js-modal-open" data-modal-id="trial-license">Experience the full power of IronBarcode</span> <a id="footer-sticky-cta-button" aria-label="Iron Software 試用授權" class="js-modal-open js-fixed-support-bar-button vwo-homepage-start-trial-cta-button--control btn btn-red btn-white-red" data-modal-id="trial-license" data-bs-toggle="modal" data-bs-target="#trial-license" > <i class="fas fa-key d-inline"></i><span class="d-inline">開始免費試用</span> </a> </div> </div> <section id="new-sc" class="main_product_page"> <div class="container-fluid_wide"> <div class="wrapper"> <article> <div class="new-suite-component__feature-logo"><a href="/zh-hant/about-us/1-percent-for-the-planet/"><img src="/img/footer/logo-h-1-percent.svg" width="204" height="32" alt="地球百分之一計劃" loading="lazy"></a></div> <h2>IronBarcode<br>是IRON的一部分<strong>套件</strong></h2> <p>10 .NET API 產品 <strong class="d-block d-md-inline">針對您的辦公文件</strong></p> <div class="button_group"> <div class="new-suite-component__cta-btn-wrapper--suite"> <a href="/zh-hant/suite/" class="buy_suite" target="_blank"> 以兩件產品的價格獲得十件產品 <i class="fa-solid fa-caret-right"></i> </a> </div> <div class="start_trial_wrapper"><a aria-label="Iron Software 試用授權" href="/zh-hant/suite/#trial-license" class="start_trial" target="_blank"><span class="fas fa-key"></span>   開始免費試用 <span class="fas fa-caret-right"></span></a></div> </div> </article> <div><div class="vline"></div></div> <div> <ul class="components"> <li class="d-block"><div class="d-block d-md-none mt-2"></div> <a class="suite-component__link d-flex flex-column flex-md-row" href="https://ironpdf.com/zh-hant/" target="_blank" title="點擊查看IronPDF主頁"> <span class="img_wrapper"><img loading="lazy" src="/img/products/h-56/ironpdf-text.svg" width="88" height="14" alt="ironpdf_logo"></span> <div class="d-block d-md-none mt-1"></div> <div class="flex-grow-1"><span class="d-none d-md-inline">- </span>建立、閱讀和編輯 PDF。HTML 轉換為 PDF 適用於 .NET。</div> </a> </li><li class="d-block"><div class="d-block d-md-none mt-2"></div> <a class="suite-component__link d-flex flex-column flex-md-row" href="/zh-hant/csharp/word/" target="_blank" title="點擊查看IronWORD主頁"> <span class="img_wrapper"><img loading="lazy" src="/img/products/h-56/ironword-text.svg" width="113" height="14" alt="IronWord標誌"></span> <div class="d-block d-md-none mt-1"></div> <div class="flex-grow-1"><span class="d-none d-md-inline">- </span>編輯DOCX Word檔案。不需要Office Interop。</div> </a> </li><li class="d-block"><div class="d-block d-md-none mt-2"></div> <a class="suite-component__link d-flex flex-column flex-md-row" href="/zh-hant/csharp/excel/" target="_blank" title="點擊查看IronXL主頁"> <span class="img_wrapper"><img loading="lazy" src="/img/products/h-56/ironxl-text.svg" width="74" height="14" alt="ironxl_logo"></span> <div class="d-block d-md-none mt-1"></div> <div class="flex-grow-1"><span class="d-none d-md-inline">- </span>編輯 Excel 和 CSV 檔案。無需 Office Interop。</div> </a> </li><li class="d-block"><div class="d-block d-md-none mt-2"></div> <a class="suite-component__link d-flex flex-column flex-md-row" href="/zh-hant/csharp/ppt/" target="_blank" title="點擊查看IronPPT主頁"> <span class="img_wrapper"><img loading="lazy" src="/img/products/h-56/ironppt-text.svg" width="342" height="56" alt="ironppt_logo"></span> <div class="d-block d-md-none mt-1"></div> <div class="flex-grow-1"><span class="d-none d-md-inline">- </span>建立、閱讀和編輯簡報。無需 Office Interop。</div> </a> </li><li class="d-block"><div class="d-block d-md-none mt-2"></div> <a class="suite-component__link d-flex flex-column flex-md-row" href="/zh-hant/csharp/ocr/" target="_blank" title="點擊查看IronOCR主頁"> <span class="img_wrapper"><img loading="lazy" src="/img/products/h-56/ironocr-text.svg" width="92" height="14" alt="ironocr_logo"></span> <div class="d-block d-md-none mt-1"></div> <div class="flex-grow-1"><span class="d-none d-md-inline">- </span>OCR(從圖像中提取文本)支持127種語言。</div> </a> </li><li class="d-block"><div class="d-block d-md-none mt-2"></div> <a class="suite-component__link d-flex flex-column flex-md-row" href="/zh-hant/csharp/barcode/" target="_blank" title="點擊查看IronBARCODE主頁"> <span class="img_wrapper"><img loading="lazy" src="/img/products/h-56/ironbarcode-text.svg" width="147" height="14" alt="ironbarcode_logo"></span> <div class="d-block d-md-none mt-1"></div> <div class="flex-grow-1"><span class="d-none d-md-inline">- </span>讀取和寫入QR和條形碼。</div> </a> </li><li class="d-block"><div class="d-block d-md-none mt-2"></div> <a class="suite-component__link d-flex flex-column flex-md-row" href="/zh-hant/csharp/qr/" target="_blank" title="點擊查看IronQR主頁"> <span class="img_wrapper"><img loading="lazy" src="/img/products/h-56/ironqr-text.svg" width="78" height="14" alt="ironqr_logo"></span> <div class="d-block d-md-none mt-1"></div> <div class="flex-grow-1"><span class="d-none d-md-inline">- </span>讀取和寫入 QR 碼。</div> </a> </li><li class="d-block"><div class="d-block d-md-none mt-2"></div> <a class="suite-component__link d-flex flex-column flex-md-row" href="/zh-hant/csharp/zip/" target="_blank" title="點擊查看IronZIP主頁"> <span class="img_wrapper"><img loading="lazy" src="/img/products/h-56/ironzip-text.svg" width="79" height="14" alt="ironzip_logo"></span> <div class="d-block d-md-none mt-1"></div> <div class="flex-grow-1"><span class="d-none d-md-inline">- </span>壓縮和解壓縮檔案。</div> </a> </li><li class="d-block"><div class="d-block d-md-none mt-2"></div> <a class="suite-component__link d-flex flex-column flex-md-row" href="/zh-hant/csharp/print/" target="_blank" title="點擊查看IronPRINT主頁"> <span class="img_wrapper"><img loading="lazy" src="/img/products/h-56/ironprint-text.svg" width="31" height="14" alt="ironprint_logo"></span> <div class="d-block d-md-none mt-1"></div> <div class="flex-grow-1"><span class="d-none d-md-inline">- </span>在 .NET 應用程式中列印文件。</div> </a> </li><li class="d-block"><div class="d-block d-md-none mt-2"></div> <a class="suite-component__link d-flex flex-column flex-md-row" href="/zh-hant/csharp/webscraper/" target="_blank" title="點擊查看IronWEBSCRAPER主頁"> <span class="img_wrapper"><img loading="lazy" src="/img/products/h-56/ironwebscraper-text.svg" width="189" height="14" alt="ironwebscraper標誌"></span> <div class="d-block d-md-none mt-1"></div> <div class="flex-grow-1"><span class="d-none d-md-inline">- </span>從網站抓取結構化數據。</div> </a> </li> </ul> </div> </div> </div> </section> <footer id="footer" class="footer" > <div class="footer__first-row-wrappe"> <div class="footer__first-row__first-column"> <div class="footer__first-row__logo"> <a href="#"> <img loading="lazy" src="/img/products/footer-top-logo-barcode-for-net.svg" alt="IronBarcode for .NET" width="244" height="40" > </a> </div> <div class="footer__first-row__logo-description"> <p>當您需要快速讀取、寫入和設計條碼時。</p> </div> </div> <div class="footer__first-row__second-column"> <div class="footer__first-row__second-column__search-wrapper js-search-footer"> <div class="footer__first-row__second-column__search"> <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.69724 15.3945C9.40504 15.3941 11.0636 14.8224 12.4089 13.7704L16.6385 18L17.999 16.6395L13.7694 12.4099C14.822 11.0645 15.3941 9.40549 15.3945 7.69724C15.3945 3.45318 11.9413 0 7.69724 0C3.45318 0 0 3.45318 0 7.69724C0 11.9413 3.45318 15.3945 7.69724 15.3945ZM7.69724 1.92431C10.881 1.92431 13.4702 4.51347 13.4702 7.69724C13.4702 10.881 10.881 13.4702 7.69724 13.4702C4.51347 13.4702 1.92431 10.881 1.92431 7.69724C1.92431 4.51347 4.51347 1.92431 7.69724 1.92431Z" fill="#181818"/> </svg> <p class="footer__first-row__second-column__text">搜索</p> <span> <span class="search-shortcut_btn_round_dark">Ctrl</span><span class="search-shortcut_btn_round_dark">K</span> </span> </div> </div> <div class="footer__first-row__second-column__navigation"> <nav class="footer__first-row__navigation"> <p class="footer__first-row__navigation__title">文件資料</p> <ul class="footer__first-row__navigation__links-list"> <li> <a class="footer__first-row__navigation__link" href="/zh-hant/csharp/barcode/examples/barcode-quickstart/" > 程式碼範例 </a> </li> <li> <a class="footer__first-row__navigation__link" href="/zh-hant/csharp/barcode/object-reference/api/" target="_blank" > API 參考文獻 </a> </li> <li> <a class="footer__first-row__navigation__link" href="/zh-hant/csharp/barcode/how-to/license-keys/" > 操作指南 </a> </li> <li> <a class="footer__first-row__navigation__link" href="/zh-hant/csharp/barcode/features/" > 功能 </a> </li> <li> <a class="footer__first-row__navigation__link" href="/zh-hant/csharp/barcode/docs/license/credits/" > 學分 </a> </li> <li> <a class="footer__first-row__navigation__link" href="/zh-hant/csharp/barcode/blog/" target="_blank" > 部落格 </a> </li> <li> <a class="footer__first-row__navigation__link" href="/zh-hant/csharp/barcode/assets/ironbarcode-brochure.pdf" target="_blank" > 產品手冊 </a> </li> </ul> </nav> <nav class="footer__first-row__navigation"> <p class="footer__first-row__navigation__title">教程</p> <ul class="footer__first-row__navigation__links-list"> <li> <a class="footer__first-row__navigation__link" href="/zh-hant/csharp/barcode/docs/" > 開始使用 </a> </li> <li> <a class="footer__first-row__navigation__link" href="/zh-hant/csharp/barcode/tutorials/csharp-barcode-image-generator/" > C# 條碼圖片生成器 </a> </li> <li> <a class="footer__first-row__navigation__link" href="/zh-hant/csharp/barcode/tutorials/csharp-qr-code-generator/" > C# QR Code 生成器 </a> </li> <li> <a class="footer__first-row__navigation__link" href="/zh-hant/csharp/barcode/tutorials/reading-barcodes/" > 使用 C# 讀取條碼 </a> </li> </ul> </nav> <nav class="footer__first-row__navigation"> <p class="footer__first-row__navigation__title">授權</p> <ul class="footer__first-row__navigation__links-list"> <li> <a class="footer__first-row__navigation__link" href="/zh-hant/csharp/barcode/licensing/" > 購買授權 </a> </li> <li> <a class="footer__first-row__navigation__link" href="/zh-hant/csharp/barcode/licensing/extensions/" > 支援擴充功能 </a> </li> <li> <a class="footer__first-row__navigation__link" href="/zh-hant/resellers/" target="_blank" > 經銷商 </a> </li> <li> <a class="footer__first-row__navigation__link" href="/zh-hant/csharp/barcode/how-to/license-keys/" > 使用序號密鑰 </a> </li> <li> <a class="footer__first-row__navigation__link" href="/zh-hant/csharp/barcode/docs/license/eula/" > 最終用戶許可協議 </a> </li> </ul> </nav> <nav class="footer__first-row__navigation"> <p class="footer__first-row__navigation__title">免費試用IronBarcode</p> <ul class="footer__first-row__navigation__links-list"> <li> <a class="footer__first-row__navigation__link footer__first-row__navigation__link--highlight js-modal-open" href="https://www.nuget.org/packages/BarCode/" target="_blank" data-modal-id="trial-license-after-download" > <i class="nuget-icon-pink"></i> 在 NuGet 上下載 </a> </li> <li> <p class="footer__first-row__navigation__link ga-dll-installer js-modal-open--downloading" data-modal-id="trial-license-after-download" data-url=" /csharp/barcode/packages/IronBarCode.zip " > <i class="fa fa-download"></i> 下載DLL </p> </li> <li> <a class="footer__first-row__navigation__link js-modal-open" href="#trial-license" data-modal-id="trial-license" > <i class="fas fa-key"></i> 開始免費試用 </a> </li> </ul> </nav> </div> </div> </div> <div class="footer__additional-background-wrapper"> <div class="footer__fourth-row-wrapper"> <div class="footer__fourth-row-wrapper__logo-block"> <a href="/zh-hant/"> <img class="footer__fourth-row-wrapper__logo-icon" loading="lazy" src="/img/svgs/hero-logo__162x20.svg" alt="Iron Software" width="162" height="20" > </a> </div> <div class="footer__fourth-row-wrapper__social-icons"> <a class="footer__fourth-row-wrapper__social-icon" href="https://github.com/iron-software" title="探索 Iron Software GitHub 資料庫" target="_blank" ><img loading="lazy" src="/img/footer-socials/github.svg" alt="Github related to 如何建立 Blazor QR 碼掃描器" width='16' height='17' ></a> <a class="footer__fourth-row-wrapper__social-icon" href="https://www.youtube.com/@ironsoftware" title="在 YouTube 上觀看 Iron Software 影片" target="_blank" ><img loading="lazy" src="/img/footer-socials/youtube.svg" alt="Youtube related to 如何建立 Blazor QR 碼掃描器" width='16' height='17' ></a> <a class="footer__fourth-row-wrapper__social-icon" href="https://twitter.com/ironsoftwaredev" title="在 Twitter 上關注 Iron Software" target="_blank" ><img loading="lazy" src="/img/footer-socials/twitter-x.svg" alt="Twitter X related to 如何建立 Blazor QR 碼掃描器" width='17' height='17' ></a> <a class="footer__fourth-row-wrapper__social-icon" href="https://www.facebook.com/teamironsoftware" title="在Facebook上與Iron Software保持聯繫" target="_blank" ><img loading="lazy" src="/img/footer-socials/facebook.svg" alt="Facebook related to 如何建立 Blazor QR 碼掃描器" width='15' height='15' ></a> <a class="footer__fourth-row-wrapper__social-icon" href="https://www.linkedin.com/company/ironsoftware" title="在 LinkedIn 上關注 Iron Software" target="_blank" ><img loading="lazy" src="/img/footer-socials/linkedin.svg" alt="Linkedin related to 如何建立 Blazor QR 碼掃描器" width='17' height='16' ></a> </div> <div class="footer__fourth-row-wrapper__address text-center text-md-end"> <address> 205 N. Michigan Ave. 芝加哥, IL 60601 美國 +1 (312) 500-3060 </address> </div> <nav class="footer__fourth-row-wrapper__contact-links-block"> <ul class="footer__fourth-row-wrapper__links-list"> <li> <a class="footer__fourth-row-wrapper__link" href="/zh-hant/about-us/" target="_blank" > 關於我們 </a> </li> <li> <a class="footer__fourth-row-wrapper__link" href="/zh-hant/news/" target="_blank" > 新聞 </a> </li> <li> <a class="footer__fourth-row-wrapper__link" href="https://academy.ironsoftware.com/zh-hant/" target="_blank" > 學院 </a> </li> <li> <a class="footer__fourth-row-wrapper__link" href="/zh-hant/customers/" target="_blank" > 顧客 </a> </li> <li> <a class="footer__fourth-row-wrapper__link" href="/zh-hant/careers/" target="_blank" > 職業 </a> </li> <li> <a class="footer__fourth-row-wrapper__link" href="/zh-hant/contact-us/" target="_blank" > 聯絡我們 </a> </li> <li> <a class="footer__fourth-row-wrapper__link" href="/zh-hant/company/iron-slack-community/" > <img loading="lazy" src="/img/icons/slack-icon.svg" class="footer__fourth-row__slack-icon" alt="Slack Icon related to 如何建立 Blazor QR 碼掃描器" width="14" height="14"> 加入 Iron Slack </a> </li> <li class="d-none d-md-flex"> <div class="iron_lang-menu dropup" data-bs-target="#footerLangNameMenuDropdown"> <span type="button" class="dropdown-toggle" id="iron_lang-menu__language-name_dropdown__current-language" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 繁體中文 </span> <ul id="footerLangNameMenuDropdown" class="dropdown-menu" aria-labelledby="footerLangNameMenuDropdown"> <li class="dropdown-item"><a class="i18n__distrans" data-language-code="en" hreflang="en" href="/csharp/barcode/blog/using-ironbarcode/blazor-qr-code-scanner-tutorial/" >English</a></li> <li class="dropdown-item"><a class="i18n__distrans" data-language-code="es" hreflang="es" href="/es/csharp/barcode/blog/using-ironbarcode/blazor-qr-code-scanner-tutorial/" >Español</a></li> <li class="dropdown-item"><a class="i18n__distrans" data-language-code="de" hreflang="de" href="/de/csharp/barcode/blog/using-ironbarcode/blazor-qr-code-scanner-tutorial/" >Deutsch</a></li> <li class="dropdown-item"><a class="i18n__distrans" data-language-code="fr" hreflang="fr" href="/fr/csharp/barcode/blog/using-ironbarcode/blazor-qr-code-scanner-tutorial/" >Français</a></li> <li class="dropdown-item"><a class="i18n__distrans" data-language-code="ja" hreflang="ja" href="/ja/csharp/barcode/blog/using-ironbarcode/blazor-qr-code-scanner-tutorial/" >日本語</a></li> <li class="dropdown-item"><a class="i18n__distrans" data-language-code="zh" hreflang="zh" href="/zh/csharp/barcode/blog/using-ironbarcode/blazor-qr-code-scanner-tutorial/" >简体中文</a></li> <li class="dropdown-item"><a class="i18n__distrans active-lang" data-language-code="zh_TW" hreflang="zh-tw" data-language-alias="zh-hant" href="/zh-hant/csharp/barcode/blog/using-ironbarcode/blazor-qr-code-scanner-tutorial/" >繁體中文</a></li> </ul> </div> </li> </ul> </nav> </div> </div> <div class="footer__fifth-row-wrapper"> <p class="footer__fifth-row-wrapper__teamseas"> <a href="/zh-hant/about-us/1-percent-for-the-planet/"> <img loading="lazy" src="/img/footer/logo-1-percent.svg" alt="支持 Teamseas" height="40"> </a> </p> <div class="copyright__links d-flex align-items-center"> <p class="footer__fifth-row-wrapper__copyright-text"> 版權所有 © Iron Software LLC 2013-2025 </p> <ul class="footer__fifth-row-wrapper__links-list"> <li> <a class="footer__fifth-row-wrapper__link" href="/zh-hant/csharp/barcode/company/terms/">條款</a> </li> <li> <a class="footer__fifth-row-wrapper__link" href="/zh-hant/csharp/barcode/company/privacy/">隱私</a> </li> </ul> </div> </div> </footer> <!-- Start Commonly Loaded Scripts --> <script src="/front/js/global.js" ></script><script src="/front/js/jquery.min.js" ></script><script src="/front/js/bootstrap/bootstrap.bundle.min.js" ></script><script src="/front/js/page.js" ></script><script src="/front/js/product.js" ></script><script src="/front/js/i18n.js" ></script><script src="/front/js/support.js" ></script><!-- customJSFiles, Start --> <script src="/front/js/blog.js" ></script> <script src="/front/js/blog-post.js" ></script> <!-- customJSFiles, End --> <!-- Clarity Code Start --> <script>(function(c,l,a,r,i,t,y){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i+"?ref=gtm2";y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);})(window,document,"clarity","script","e18g6h23z5");</script> <!-- Clarity Code End --> <!-- AC Code Start --> <script> (function(e,t,o,n,p,r,i){e.visitorGlobalObjectAlias=n;e[e.visitorGlobalObjectAlias]=e[e.visitorGlobalObjectAlias]||function(){(e[e.visitorGlobalObjectAlias].q=e[e.visitorGlobalObjectAlias].q||[]).push(arguments)};e[e.visitorGlobalObjectAlias].l=(new Date).getTime();r=t.createElement("script");r.src=o;r.async=true;i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)})(window,document,"https://diffuser-cdn.app-us1.com/diffuser/diffuser.js","vgo"); vgo('setAccount', '67102302'); vgo('setTrackByDefault', true); vgo('process'); </script> <!-- AC Code End --> <!-- Impact Sale Tracker Start --> <script> (function(a,b,c,d,e,f,g){e['ire_o']=c;e[c]=e[c]||function(){(e[c].a=e[c].a||[]).push(arguments)};f=d.createElement(b);g=d.getElementsByTagName(b)[0];f.async=1;f.src=a;g.parentNode.insertBefore(f,g);})('https://utt.impactcdn.com/A3939631-3270-458d-9c5f-3bb30b1b31011.js','script','ire',document,window); </script> <script type="text/javascript"> ire('identify', {customerId: '', customerEmail: ''}); </script> <!-- Impact Sale Tracker End --> <!-- End Commonly Loaded Scripts --> <!-- Start Algolia Insights Client --> <script> document.addEventListener("DOMContentLoaded", function() { document.onFirstUserInteraction(function() { importScript('tracking-code/algolia.js', debug()).then(function(status) { if (status) { importScript('algoliasearch-lite.umd.js', debug()).then(function() { setTimeout(function() { setupAlgoliaSearch('{"applicationId":"4S8YCFXKT5","apiKey":"ec878b51c06a7d5fbb7aab95991ab432","indexName":"ironbarcode","searchText":"\u641c\u7d22","boostedResult":"\u9019\u5c07\u662f\u6700\u6709\u7528\u7684\u6587\u7ae0","searchShortCut":["Ctrl","K"],"inputPlaceholder":"\u641c\u7d22 API\u3001\u4ee3\u78bc\u7bc4\u4f8b\u548c\u6559\u7a0b","categories":[{"title":"\u6700\u4f73\u914d\u5c0d","iconClass":null,"color":null},{"title":"\u7a0b\u5f0f\u78bc\u7bc4\u4f8b","iconClass":"fas fa-code","color":"#2A95D5"},{"title":"\u7522\u54c1","iconClass":"fas fa-bookmark","color":"#E01A59"},{"title":"\u958b\u59cb\u4f7f\u7528","iconClass":"fas fa-rocket","color":"#2A95D5"},{"title":"\u6559\u7a0b","iconClass":"fas fa-graduation-cap","color":"#FDA509"},{"title":"\u64cd\u4f5c\u6307\u5357","iconClass":"fa-regular fa-book","color":"#63C1A0"},{"title":"\u8a9e\u8a00","iconClass":"fas fa-globe-americas","color":"#2A95D5"},{"title":"\u6388\u6b0a","iconClass":"fas fa-shopping-cart","color":"#E01A59"},{"title":"API \u53c3\u8003\u6587\u737b","iconClass":"fas fa-bookmark","color":"#89D3DF"},{"title":"\u529f\u80fd","iconClass":"fas fa-bookmark","color":"#63C1A0"},{"title":"\u652f\u63f4","iconClass":"fas fa-info-circle","color":"#2A95D5"},{"title":"\u90e8\u843d\u683c","iconClass":"fa-regular fa-file","color":"#15aabf"},{"title":"\u6545\u969c\u6392\u9664","iconClass":"fas fa-wrench","color":"#15aabf"},{"title":"\u7522\u54c1\u66f4\u65b0","iconClass":"fa-solid fa-rotate","color":"#146ebe"}],"previewEnabled":false,"categorySortingEnabled":false,"breadcrubmsEnabled":true,"searchResultLimit":10,"breadcrumbs":[{"title":"IronBarcode","url":"/csharp/barcode/"},{"title":"\u6388\u6b0a","url":"/csharp/barcode/licensing/"},{"title":"\u6587\u4ef6","url":"/csharp/barcode/docs/"},{"title":"\u7a0b\u5f0f\u78bc\u7bc4\u4f8b","url":"/csharp/barcode/examples/barcode-quickstart/"},{"title":"\u6559\u7a0b","url":"/csharp/barcode/tutorials/reading-barcodes/"},{"title":"API \u53c3\u8003\u6587\u737b","url":"/csharp/barcode/object-reference/api/"},{"title":"\u652f\u63f4","url":"https://ironsoftware.com/contact-us/"},{"title":"IronPDF","url":"https://ironpdf.com/"},{"title":"IronOCR","url":"https://ironsoftware.com/csharp/ocr/"},{"title":"IronXL","url":"https://ironsoftware.com/csharp/excel/"},{"title":"IronWebScraper","url":"https://ironsoftware.com/csharp/webscraper/"},{"title":"Iron Software","url":"https://ironsoftware.com/"},{"title":"\u7522\u54c1","url":"https://ironsoftware.com/"}],"noResults":{"message":"\u6c92\u6709\u7d50\u679c <strong>\u201c{query}\u201d</strong>.","icon":"/img/svgs/search-no-results.svg","alt":"\u8a0a\u606f\u5716\u793a"},"error":{"message":"\u51fa\u4e86\u9ede\u554f\u984c\u3002\u8acb\u91cd\u65b0\u8f38\u5165\u3002","icon":"/img/svgs/search-no-results.svg","alt":"\u8a0a\u606f\u5716\u793a"}}', "ironbarcode__zh_TW"); }, 500); document.fireCustomEvent("thirdPartyScriptLoaded", {scriptName: "algolia"}); }); } }); }); }); </script> <!-- End Algolia Insights Client --> </body> </html>